Menu
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> 
284
The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible - This creates a toggle effect.
The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: To show hidden elements, look at the show() method.
The toggle() method attaches two or more functions to toggle between for the click event for the selected elements. When clicking on an element, the first specified function fires, when clicking again, the second function fires, and so on. Note: There is also a jQuery Effects method called toggle().
To toggle a div visibility in jQuery, use the toggle() method. It checks the div element for visibility i.e. the show() method if div is hidden. And hide() id the div element is visible. This eventually creates a toggle effect.
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(
75
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
