Menu
I have a set of divs that I want to make collapsible/expandable using jQuery's slideToggle() method. How do I make all of these divs collapsed by default? I'd like to avoid explicitly calling slideToggle() on each element during/after page rendering.
567
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down.
The . slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
slideToggle() Display or hide the matched elements with a sliding motion.
jQuery slideUp() MethodThe slideUp() method slides-up (hides) the selected elements. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To slide-down (show) elements, look at the slideDown() method.
You will have to assign a style: display:none to these layers, so that they are not displayed before javascript rendering. Then you can call slideToggle() without problems. Example:
<style type="text/css"> .text{display:none} </style> <script type="text/javascript"> $(document).ready(function() { $('span.more').click(function() { $('p:eq(0)').slideToggle(); $(this).hide(); }); }); </script> <body> <p class="text"> I am using jquery <br/> I am using jquery <br/> I am using jquery <br/> I am using jquery <br/> I am using jquery <br/> I am using jquery <br/> </p> <span class="more">show</span> 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
