Show/hide Div By Clicking Image

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

Solution 1:

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>

Solution 2:

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.

Solution 3:

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>

Solution 4:

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.