[drakulawz]

laimas, смотрите, у меня есть вот такой CSS:

/*В ОБЫЧНОМ РЕЖИММЕ*/
.header_main {
    vertical-align: middle;
    width: 100%;
    margin: 10px 0 0;
}

.enter {
    width: 77%;
    background: #524C96;
    color: #fff;
    float: left;
    padding: 2px 10px;
}

.enter a {
    text-decoration: none;
    color: #fff;
}

.enter a:hover {
    text-decoration: underline;
    color: #fff;
}

.enter_btn {
    display: none;
    border: none;
    background: none;
}

.enter_btn i {
    color: #d6d6d6;
    font-size: 18px;
}

.enter_btn i:hover{
    transform: scale(1.1);
    transition: .1s;
}

.login_activ {
    display: none;
    background: #524c96;
    margin: 0;
    padding: 0;
    transition: .4s;
}

.login_activ input {
    border: none;
    background: #d6d6d6;
}

.input {
    display: inline-block;
    padding: 0 5px 5px;
}

.login_btn {
    vertical-align: top;
    border: none;
    background: #524C96;
    width: 25px;
    height: 46px;
    padding: 0;
    margin: 0;
}

.login_btn i {
    cursor: pointer;
    color: #d6d6d6;
    transform: scaleY(2) scaleX(1.5)
}

.login_btn i:hover {
    transform: scaleY(2.2) scaleX(1.7);
    transition: .1s;
}

.login_activ p {
    float: right;
    margin: 0;
    padding: 0 10px 0 10px;
    color: #ede6e6;
    background: #524C96;
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .enter_btn {
        display: inline-block;
    }

    .log_reg {
        display: none;
    }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .log_reg {
        display: inline-block !important;
}

Когда расширение экрана маленькое, то появится кнопка по нажатии на которую сработает функция:

$('.enter_btn').click(function(){
     $('.log_reg').slideToggle(300);
   }
});

Дальше, по нажатию на <a href="#" class="login">LogIn</a> сработает функция:

$('.login').click(function () {
      $('.login_activ').slideToggle(400);
});

Теперь, когда я в обратной последовательности нажму на эти кнопки, всё отлично сработает и скроется - останется только кнопка <button class='enter_btn'><i class="fas fa-user"></i></button>, НО! Когда я НЕ нажму на кнопку <a href="#" class="login">LogIn</a>, а сразу нажму на enter_btn, то свернётся только:

<div class="log_reg">
      <a href="#" class="login">LogIn</a> /
      <a href="#" class="registration">Registration</a>
</div>

А блок:

<div class="login_activ">
             <div class="input">
                    <input type="text" placeholder=" ... email"><br>
                    <input type="text" placeholder=" ... parol">
             </div>
             <button class="login_btn"><i class="fas fa-sign-in-alt"></i></button>
             <p>If you have an account then log in! <br>If not - press registration.</p>
</div>

останется даже при увеличении расширения...
Вопрос, куда мне этот .is(':hidden') совать?