How to switch between two classes in jquery?

Question

I have a problem with toggleClass , it looks like it is working incorrectly. The image should change between show and hide . It changes to hide , but not back

here is my example and some code:

 <div class="top_menu_hidden" style="display: none; ">testing</div> <div class="show_menu"></div> $('.show_menu').on('click', function(){ $('.top_menu_hidden').stop().slideToggle('normal', function(){ $(".show_menu").toggleClass("hide_menu show_menu"); }); });​ .show_menu{ background: url("http://placehold.it/150&text=show") no-repeat scroll 0 0 transparent; height: 150px; width: 150px; } .hide_menu{ background: url("http://placehold.it/150&text=hide") no-repeat scroll 0 0 transparent; height: 150px; width: 150px; } 

any ideas?

thanks

Answer 1

 $(".show_menu, .hide_menu").toggleClass("hide_menu show_menu"); 

Demo

Full code

 $('.show_menu').on('click', function() { $('.top_menu_hidden').stop().slideToggle('normal', function() { $(".show_menu, .hide_menu").toggleClass("hide_menu show_menu"); }); }); 

Answer 2

There is a switch function that does this for you out of the box:

 $(".show_menu").toggle(); 

toggle docs:

Description. Show or hide matching items.