Как изменить между 2 классами при нажатии на div

Question

Im пытается добавить и изменить классы toggle-nav между двумя разными классами, когда меняет другой div toggle-btn.

мне нужно иметь классы fadeInDown при первом нажатии и fadeUpOut когда ДИВ нажата еще раз, используя Jquery

Вот код, у меня есть

<script> 
$(document).ready(function() 
{ 
    $('.toggle-btn').click(function() { 
    $(".toggle-nav").toggleClass("fadeInDown "); 

    }); 
    }); 


</script> 

<div class="container"> 
<label class="toggle-btn" for="menu-toggle"> 
<i class="fa fa-bars fa-4x"></i> 
<span>MENU</span> 
</label> 
</div> 

    <input type="checkbox" id="menu-toggle"/> 

    <div id="toggle-bar" class="toggle-nav animated clearfix"> 
     <div class="container"> 
      <div class="nav-sections"> 
       <div class="col-md-4 top-nav-1">item1</div> 
       <div class="col-md-3 top-nav-2">item2</div> 
       <div class="col-md-2 top-nav-3">item3</div> 
       <div class="col-md-3 top-nav-4">item4</div> 
      </div> 
     </div> 
    </div> 

Любая помощь будет удивительным!

Спасибо!

-Issac

Answer 1

См jsfiddle. Но не было бы проще добавить только один класс, если вы хотите, чтобы показать меню (как нав видимый) и сделать его по умолчанию скрыто:

.toggle-nav { 
    height:0; 
    transition: 2s height; 
    overflow:hidden; 
} 
#menu-toggle{ 
    display:none; 
} 
.toggle-nav.fadeInDown { 
    height:100px; 
} 

See this jsfiddle.