JQuery: if the element is hidden, do the action?

Question

Hi, I searched a bit on the Internet, but did not find what I was really looking for. But in any case, what I'm looking for seems to be that if the element is hidden, then it will take an action, and then, if the element is visible, it will take another action. In this case, I create the show / hide menu, when you click on the menu icon (with the ".toggle" class), it will change the opacity to 1, and when you hide the menu, the opacity of the icon will change to 0.6 again.

Here is my code anyway:

$(".sidebar_menu").hide(); $(".sidebar li.toggle").click(function(){ $(".sidebar_menu").animate({width: "toggle"}, 200); // Here where the code I can't figure out is gonna be. }); 

Hope you guys want to help me, it would be nice! Thanks.

Answer 1

this works for hidden and visible elements:

 $(".sidebar_menu").hide(); $(".sidebar li.toggle").click(function(){ $(".sidebar_menu").animate({width: "toggle"}, 200, function() { if($(this).is(':visible')){ $(".toggle").css({opacity: 1}); } else if ($(this).is(':hidden')) { $(".toggle").css({opacity: 0.6}); }; }) }); }); 

Edit: using .toggle()

 $(".sidebar_menu").hide(); $(".sidebar li.toggle").click(function(){ $(".sidebar_menu").toggle('slow', function() { if($(this).is(':visible')){ $(".toggle").css({opacity: 1}); } else if ($(this).is(':hidden')) { $(".toggle").css({opacity: 0.6}); }; }) }); }); 

Here you see a small example: FIDDLE