Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle show/hide on click with jQuery

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?

like image 237
Cyclone Avatar asked Apr 25 '12 06:04

Cyclone


People also ask

How do I toggle an event in jQuery?

The toggle() method attaches two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on. Note: There is also a jQuery Effects method called toggle().

What does jQuery hide () do?

The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.

What is toggle jQuery?

jQuery | toggle() Method The toggle() method is used to check the visibility of selected elements to toggle between hide() and show() for the selected elements. show() is run when the element is hidden.

How do you display a div only when a button is clicked?

If you don't want to show it from the start, use the display : none or visibility: hidden; property. Oh, thank you! But the div should just be visible when a button was clicked. Not directly at the join of the page.


2 Answers

The toggle-event is deprecated in version 1.8, and removed in version 1.9

Try this...

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

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed, jQuery docs.

The .toggle() method is provided for convenience. It is relatively straightforward to implement the same behavior by hand, and this can be necessary if the assumptions built into .toggle() prove limiting. For example, .toggle() is not guaranteed to work correctly if applied twice to the same element. Since .toggle() internally uses a click handler to do its work, we must unbind click to remove a behavior attached with .toggle(), so other click handlers can be caught in the crossfire. The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element, jQuery docs

You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UI to use addition effects with show / hide like direction.

Live Demo

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

Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.

Live Demo

$( "#myelement" ).click(function() {         $('#another-element').toggle("slide", { direction: "right" }, 1000); }); 
like image 121
Adil Avatar answered Sep 19 '22 22:09

Adil


Make use of jquery toggle function which do the task for you

.toggle() - Display or hide the matched elements.

$('#myelement').click(function(){       $('#another-element').toggle('slow');   }); 
like image 34
Pranay Rana Avatar answered Sep 20 '22 22:09

Pranay Rana