46

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> 

4 Answers 4

74

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(

1
  • 1
    Loved the part about cleaning up my jQuery! For more flexibility you can instead use a data attr in the toggler, like data-toggles-element: "div-id".
    – nitsas
    Jun 20, 2017 at 13:28
7

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

0
3

Just add style="display: none;" to the div. This will start the div class as hidden.

When the jQuery toggles the block, style will then be changed to block

0

<style>
.reply {
    display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("form").toggle();
    });
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<form action="#" class="row m0 comment_form reply" >
  <h5>post your comment:</h5>
  <textarea class="form-control"></textarea>
  <input type="submit" value="submitnow" class="btn btn default">
  </form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.