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

User · Answer

You can use  toggle   function instead of  click

User · Answer

You can use this code for toggle your element  var ele   jQuery  yourelementid    ele slideToggle  slow    this will work for you

User · Answer

document  ready  function         button   click function           p   toggle 1000  linear                Live Demo

User · Answer

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

User · Answer

lt  DOCTYPE html gt   lt html gt   lt head gt   lt script src  quot https   ajax googleapis com ajax libs jquery 3 5 1 jquery min js lt  script gt          lt script gt    document  ready function         quot button quot   click function           quot p quot   toggle               lt  script gt   lt  head gt   lt body gt   lt p gt Welcome     lt  p gt   lt button gt Toggle between hide   and show   lt  button gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

this will work for u         button-name   click function                toggle-id   slideToggle  slow

[javascript] Toggle show/hide on click with jQuery

Examples related to javascript

Examples related to toggle

Examples related to jquery