Question

I have this markup

<div id="content" >
      <h1><a href="#">Sample 1</a></h1>
      <img src="" alt="sample 1" />

       <h1><a href="#">Sample 2</a></h1>
      <img src="" alt="sample 2" />

       <h1><a href="#">Sample 3</a></h1>
      <img src="" alt="sample 3" />

       <h1><a href="#">Sample 4</a></h1>
      <img src="" alt="sample 4" />
</div>

I want that all images hide when the page loads, then when I click on every “h1”, its image slide down and when I click on it again, it slides up.
1- consider that I do not want all images slide down and up when I click on a “h1”, just the related image slides up and down.

help me please

Answer 1

It should be as simple as something like this:

//On DOM ready...
$(function () {

    //Hide all `img` elements...
    $("img").hide();

    //Bind click event handler to `#content`, responds to clicks on `h1`
    $("#content").on("click", "h1", function () {

        //Find the immediately following sibling and slide it up/down
        $(this).next().slideToggle();
    });
});

Note that the above takes advantage of event delegation so only one event handler exists instead of one for every h1 element, which is more efficient.

References:

• .on()
• .next()
• .slideToggle()
• .hide()

I recommend that you spend some time reading through the jQuery API and getting to know it. It shouldn’t have been difficult to figure out the above just by looking at the methods available to you.