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.
Making slideToggle() elements collapsed by default in jQuery
Viewed 60231
4 Answers
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>
You can start your elements with style="display: none;" and slideToggle() will take it from there.
you probably can do something like this:
$(document).ready(function(){
$('div').hide();
});
Related