show/hide div by clicking image

Question

I want to be able to click on images to show/hide a div (with text). I've got this working for one image, but I have multiple images that need to toggle text.

The javascript code

    $(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function() {
        $("slidingDiv").slideToggle();
    });

});

The HTML:

<a href="#" class="show_hide"><img src="image.jpg"></a>
<div class="slidingDiv">
    <h2>Title</h2>
    <p>text</p>
</div>

So this works, but it only works for one image+div. I want to have a second image and div, but using the same slidingDiv class and then clicking the second image to toggle the second div obviously toggles both divs.

So how can I get two images to toggle their own div, instead of toggling both divs at the same time when clicking one of the two images?

Answer 1

Change:

$("slidingDiv").slideToggle();

to

$(this).next(".slidingDiv").slideToggle();

jsFiddle example

$(".slidingDiv") , as you noticed, selects all elements with the slidingDiv class. To select the slidingDiv class relative to the element you click on, use this to refer to the element being clicked on, and then .next(".slidingDiv") to select the next element as long as it has the class slidingDiv.

Answer 2

You forgot to add "." in $("slidingDiv").slideToggle();

You can also use this

JsFiddle Example

 $(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { //$(".slidingDiv").slideToggle(); var isvisible = $(this).next('.slidingDiv').is(':visible'); if ( isvisible ) { $(this).next('.slidingDiv').hide(); } else{ $(this).next('.slidingDiv').show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <a href="#" class="show_hide"><img src="image.jpg" alt="img"/></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> 

Answer 3

Try this:

$('.show_hide').click(function(e) {
    $(e.target).parent().next('.slidingDiv').slideToggle();
});

e.target will give you the source DOM element for click event .

Answer 4

Wrap both in a same div and do the next steps:

1. find the parent of the image with .parent()
2. find the .slidingDiv of the parent with .find()
3. hide/show the .slidingDiv with .slideToggle()

 $(document).ready(function() { $(".slidingDiv").hide(); $(".show_hide").show(); $('.show_hide').click(function() { $(this).parent().find(".slidingDiv").slideToggle(); }); }); 

 .fleft{ float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="fleft"> <!-- This is the parent div --> <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> </div> <div class="fleft"> <!-- This is the parent div --> <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> </div> <div class="fleft"> <!-- This is the parent div --> <a href="#" class="show_hide"><img style="width:100px;height:100px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"></a> <div class="slidingDiv"> <h2>Title</h2> <p>text</p> </div> </div>