Как проверить свёрнут ли div или нет?
 

Здравствуйте!
Сделал элементарное сворачивание элемента div, но оно получилось двухуровневое. Теперь мне надо проверить свёрнут или развёрнут второй уровень (точнее div под div-ом), как это сделать?

<div class="container">
                <div class="col-md-12">
                    <div class="row">
                            <div class="enter">
                                <button class='enter_btn'><i class="fas fa-user"></i></button>
                                <div class="log_reg">
                                    <a href="#" class="login">LogIn</a> /
                                    <a href="#" class="registration">Registration</a>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="col-md-12">
                    <div class="row">
                        <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 - click registration.</p>
                        </div>
                    </div>
                </div>
            </div>

//Развёртывание/свёртывание формы LogIn;
    $('.login').click(function () {
        $('.login_activ').slideToggle(400);
    });
    
    //Развёртывание/свёртывание LogIn/Registration;
    $('.enter_btn').click(function(){
        $('.log_reg').slideToggle(300);
        //попытка проверить условие:
        if($('.login_activ').slideUp()){
            $('.login_activ').slideDown();
        }
    });

.is(':hidden')

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') совать?

Намудрил вот такое:

$('.enter_btn').click(function(){
        $('.log_reg').slideToggle(300);
        if($('.login_activ').is($('.login_activ').css({display: 'inline-block'}))){
            $('.login_activ').slideToggle();
        }
    });

Теперь по нажатию на кнопку которая разворачивает/сворачивает LogIn / Registration всё сворачивается и разворачивается за пару миллисекунд но при повторном нажатии всё повторяется - развернулось и свернулось, помогите доработать, пожалуйста!:cray:

Блин...вроде всё правильно, работает ведь и так, но вот почему оно мельтешит при клике? Как убрать это "мигание" блока?

Всё, благодарю laimas, за совет, получилось. Сразу как-то не додумался:

$('.enter_btn').click(function(){
      $('.log_reg').slideToggle(300);
      if($('.login_activ').is($('.login_activ').css({display: 'inline-block'}))){
          $('.login_activ').css({display:'none'});
      }
});