In my code I use jQuery's toggle('slow')
animation to make a hidden div appear/disappear. It expands from the upper left to the bottom right.
How can I make it expand from the top towards the bottom, instead (no left-to-right growth)?
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().
jQuery slideToggle() Method The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.
Definition and Usage The slideDown() method slides-down (shows) the selected elements. Note: slideDown() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden). Tip: To slide-up (hide) elements, look at the slideUp() method.
jQuery slideToggle() Method$(selector). slideToggle(speed,callback); The optional speed parameter can take the following values: "slow", "fast", milliseconds. The optional callback parameter is a function to be executed after the sliding completes.
You could use .slideToggle('slow')
.
The working demo.
Try .slideDown('slow')
. Note that this will only work for sliding down (to reveal) and sliding up (to hide). For anything more complex, you're looking for .animate(...)
or something from jQuery UI.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With