How to start off my jquery toggles as hidden?

Solution 1:

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(

Solution 2:

With css:

#one, #two, #three { display: none; }

With jQuery

$(function() {  //once the document is ready
  $('h2').nextAll('img') //select all imgs following the h2
    .find('div')  //select all contained divs
    .hide();
})

By the way, rather than using id selectors you should probably use classes