How to start off my jquery toggles as hidden?
I have some code which displays three images and a respective div under each image. Using the jquery .toggle function I have made it so each div will toggle when the image above it is clicked. Is there any way to make it so the divs start off as hidden?
Thank you for your time,
CODE FOR REFERENCE:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#picOne").click(function(){
$("#one").toggle(250);
});
$("#picTwo").click(function(){
$("#two").toggle(250);
});
$("#picThree").click(function(){
$("#three").toggle(250);
});
});
</script>
</head>
<body>
<center>
<h2>Smooth Transitions</h2>
<img src="one.png" id="picOne">
<div id="one">
<p>first paragraph.</p>
</div>
<img src="two.png" id="picTwo">
<div id="two" visibility="hidden">
<p>Second Pair of giraffe.</p>
</div>
<img src="three.png" id="picThree">
<div id="three">
<p>Thiird paragraph.</p>
</div>
</center>
</body>
</html>
Answer
visibility is a css property. But display is what you want in any event
<div id="two" style="display:none;">
<p>Second Pair of giraffe.</p>
</div>
Or ditch the inline css and give each div to be toggled a css class
<div id="two" class="initiallyHidden">
and then
.initiallyHidden { display: none; }
And you can also clean up your jQuery a bit. Give your toggle-causing images a css class
<img src="one.png" class="toggler">
<div>
<p>first paragraph.</p>
</div>
And then
$("img.toggler").click(function(){
$(this).next().toggle(250);
});
This would obviate your need for all those IDs, and would also make this solution much, much more extensible.
And to handle dynamically added content, you could use on instead of click
$(document).on("click", "img.toggler", function(){
$(this).next().toggle(250);
});
(and for better performance, make sure all these toggling images are in some container div, named, say, containerFoo, then do $("#containerFoo").on instead of $(document).on(