Simon Simon - 29 days ago 18
jQuery Question

Trouble hiding "dropdown" menu

I've made a "dropdown" menu. It works perfectly when I open/show it but I can't close/hide it?

<div class="expand-menu">
<div class="cities">
<!-- menu content -->
</div>
</div>
<ul>
<li class="choose-btn">
<a href="">City name</a>
</li>
</ul>


var city_btn = $(".choose-btn");
var city_active = $(".choose-btn a");
var Expand_menu = (".expand-menu");
var City_cont = (".cities");


Here I open/show my "dropdown" menu (works)

$(city_btn).click(function() {
$(Expand_menu).animate({top: "0"}, 'normal');
$(Expand_menu).fadeIn({queue: false, duration: 'normal'});
$(City_cont).fadeIn("normal");
$(city_active).addClass("choose-btn-active");
return false;
});


Here I would like to close/hide it

$(city_btn).click(function() {
$(Expand_menu).animate({top: "10px"}, 'normal');
$(Expand_menu).fadeOut({queue: false, duration: 'normal'});
$(City_cont).fadeOut("normal");
$(city_active).removeClass("choose-btn-active");
return false;
});

Answer

Try using like this,

var city_btn = $(".choose-btn");
var city_active = $(".choose-btn a");
var Expand_menu = $(".expand-menu");
var City_cont = $(".cities");

city_btn.click(function() {

if(city_active.hasClass("choose-btn-active")){
   Expand_menu.animate({top: "10px"}, 'normal');
   Expand_menu.fadeOut({queue: false, duration: 'normal'});
   City_cont.fadeOut("normal");
   city_active.removeClass("choose-btn-active");

   return false;

   }else{

     Expand_menu.animate({top: "0"}, 'normal');
     Expand_menu.fadeIn({queue: false, duration: 'normal'});
     City_cont.fadeIn("normal");
     city_active.addClass("choose-btn-active");

      return false;

  }
});