Toggle a div to close at boot time?

Question

The following function switches the div when clicking on the relative identifier. Any way to set it so that the page spread is closed when the page loads?

I do not want to be seen until they click.

Best

Joey

<script type="text/javascript"> $(document).ready(function() { $("#architects").click(function() { $(".exclusive-architects").toggle(); }); $("#international").click(function() { $(".exclusive-international").toggle(); }); $("#designers").click(function() { $(".exclusive-designers").toggle(); }); $("#historical").click(function() { $(".exclusive-historical").toggle(); }); }); </script> 

Answer 1

Just hide them on dom ready, for example:

 <script type="text/javascript"> $(document).ready(function() { $(".exclusive-architects, .exclusive-international, .exclusive-designers, .exclusive-historical").hide(); $("#architects").click(function() { $(".exclusive-architects").toggle(); }); $("#international").click(function() { $(".exclusive-international").toggle(); }); $("#designers").click(function() { $(".exclusive-designers").toggle(); }); $("#historical").click(function() { $(".exclusive-historical").toggle(); }); }); </script> 

Answer 2

 $(function(){ // DOM ready $(".exclusive-architects").hide(); $(".exclusive-international").hide(); $(".exclusive-designers").hide(); $(".exclusive-historical").hide(); }); 

it should work :)

Answer 3

You just need to add display:none to the start CSS

Answer 4

Demo

if your HTML looks like this:

 <div id="buttons"> <div>toggle architects</div> <div>toggle international</div> <div>toggle designers</div> <div>toggle historical</div> </div> <div class="cont"> architects content </div> <div class="cont"> international content </div> <div class="cont"> designers content </div> <div class="cont"> historical content </div> 

Than all you need is :

 $('.cont').hide(); // HIDE ALL INITIALLY $('#buttons div').click(function(){ $('.cont').eq( $(this).index() ).toggle(); });