CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3210292
user3210292

Reputation: 23

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

    $(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?

Upvotes: 1

Views: 11884

Answers (4)

ambes
ambes

Reputation: 5342

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.

Upvotes: 0

kpucha
kpucha

Reputation: 729

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>

Upvotes: 0

Uttam Kumar Roy
Uttam Kumar Roy

Reputation: 2058

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>

Upvotes: 1

j08691
j08691

Reputation: 208032

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.

Upvotes: 0

Related Questions