Toggle show hide on click with jQuery

Question

I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself:

$('#myelement').click(function(){
     $('#another-element').show("slide", { direction: "right" }, 1000);
});

How can I make that so when I click on the #myelement one more time (when the element is showed already) it will hide the #another-element like this:

$('#another-element').hide("slide", { direction: "right" }, 1000);?

So basicly, it should work exactly like a slideToggle but with the show/hide functions. Is that possible?

Answer 1

jQuery toggle() Method

The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.