49

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?

7 Answers 7

65

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);
});
3
  • 1
    Thanks @T.J.Crowder for pointing. I have modified my answer, please have a look.
    – Adil
    Commented Jun 30, 2014 at 4:05
  • +1, but I wouldn't look it up repeatedly. var elm = $("#another-element"); if (elm.is(":visible")) { /* Do one thing */ } else { /* Do the other */ } (Your specific example would actually be a one-liner inside the click: $('#another-element').toggle("slide", { direction: "right" }, 1000); but as the goal is to show doing different things [two functions]...) Commented Jun 30, 2014 at 6:40
  • 3
    btw Toggle() is now deprecated.
    – BLoB
    Commented Jun 9, 2015 at 10:39
30

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');
  });
1
  • 1
    when you use toggle it hides the content, but the values are still present and can be seen on page post
    – vishB
    Commented Apr 8, 2014 at 9:35
4

this will work for u

   $("#button-name").click(function(){
        $('#toggle-id').slideToggle('slow');
    });
1
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script>        <script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
0

You can use this code for toggle your element var ele = jQuery("yourelementid"); ele.slideToggle('slow'); this will work for you :)

1
  • 1
    Not really, as I want to slide it to the left side. And slideToggle is toggling the elements vertically.
    – Cyclone
    Commented Apr 25, 2012 at 7:12
0

You can use .toggle() function instead of .click()....

-3
$(document).ready( function(){
  $("button").click(function(){
    $("p").toggle(1000,'linear');
  });
});

Live Demo

1
  • This is basically the same code as given in the accepted answer + linked code example is not the same as in the answer.
    – BDL
    Commented Feb 18, 2015 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.