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.
+1
A:
you probably can do something like this:
$(document).ready(function(){
$('div').hide();
});
Anne Porosoff
2008-12-01 23:29:26
+4
A:
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>
netadictos
2008-12-01 23:30:45
This'd cause issues for people who have Javascript disabled but CSS enabled. They won't be able to see your content!
strager
2008-12-01 23:39:52
I know, but the question implied that Craig didn't want to use javascript to do the show/hide action, so the only alternative is stylesheets. Anyway, surely if he is using javascript in some manner, his code will be totally inaccessible for screen readers etc... I work with this type of exigences
netadictos
2008-12-01 23:46:53
strager is right, but in this particular case I don't care so much about +CSS -JS (the site will have bigger problems then this particular page if that's the case).
Craig Walker
2008-12-01 23:53:13
+2
A:
You can start your elements with style="display: none;" and slideToggle() will take it from there.
Dave Ward
2008-12-03 02:27:38