show/hide mulptiple divs using jquery

Question

im very new to jquery , i understand some of it but this is hitting me hard. so ive looked around for an answer but maybe im trying to be too specific.

this is the jquery code im using :

$(document).ready(function(){

    $(".slidingDiv").hide();
    //hides the div 

    $(".show_hide").show();
    //click on the img to show hidden div 

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

});


heres example of the html :

<div class">


<img height="300" width="350" src="images/web.png" alt="design 1"  class=" show_hide img-responsive center-block wow fadeIn" href="#"/>
<br>

</div>  

when i click this image , it toggles the hidden div :

<div class="slidingDiv">


          <div>


      <img height="300" width="350" src="images/web.png" alt="design 1"  class="img-responsive center-block" />

          </div>
</div>

css: 

.slidingDiv{
height:400px;
background-color:black;
padding:50px;
margin-top:10px;
margin-bottom: 35px;
border-bottom:1px solid #3399FF;
}

.show_hide{
display:none;
}

and this works awesome when i add "show_hide" class to the image i want to use , then the div appears nicely above when i add the class "slidingDiv" , but how do i implement this into more than one image with different divs with jquery?

i just registered today at stack so sory if im doing somethings wrong.

Answer 1

Here is how you can do,

$(document).ready(function(){

    $(".slidingDiv").hide();
    //hides the div 

    $(".show_hide").click(function(){
        $(".slidingDiv").show("slow"); 
    });


});

Here is a demo

If you want to make multiple div appear and disappear when you click on a single image you can add the class slidingDiv to those div

<div class="slidingDiv">
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
    text text text text text text text
</div>
<div class="slidingDiv">
    text text text text text text text
    text text text text text text text
</div>
<div class="slidingDiv">
    text text text text text text text
    text text text text text text text
</div>

Demo for multiple images

Answer 2

With the HTML setup you have, you will want to navigate up and then to the sibling .slidingDiv like

$('.show_hide').click(function() {
        $(this).closest('div').next(".slidingDiv").slideToggle("slow");
      });

 $(document).ready(function() { $(".slidingDiv").hide(); //hides the div $(".show_hide").show(); //click on the img to show hidden div $('.show_hide').click(function() { $(this).closest('div').next(".slidingDiv").slideToggle("slow"); }); });

 .slidingDiv { height: 75px; background-color: black; padding: 50px; margin-top: 10px; margin-bottom: 35px; border-bottom: 1px solid #3399FF; } .show_hide { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class=" show_hide img-responsive center-block wow fadeIn" href="#" /> <br> </div> <div class="slidingDiv"> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class="img-responsive center-block" /> </div> </div> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class=" show_hide img-responsive center-block wow fadeIn" href="#" /> <br> </div> <div class="slidingDiv"> <div> <img height="30" width="35" src="images/web.png" alt="design 1" class="img-responsive center-block" /> </div> </div>

Answer 3

Although you seem to have found your solution but to provide you with another alternative, ie if you are interested in the first place, here is what I have been able to produce . This is an overly simplistic example mind you and the intention is to provide you with an idea.

The way it works is that it would get the index() of clicked element out of elements that are click-able and it would apply this index() on the set of other elements that need to be animated with the help of eq() method.

JavaScript:

$(document).ready(function(){
    $('.image-container').on('click',function(){
        $('.sliding-div').eq($(this).index()).stop().slideToggle();
    });
});

Benefit of using this approach is that you don't have to repeat code. Another benefit is that your sliding-div elements do not necessarily have to remain close to image-container elements in HTML, they can be wherever they need to be in the markup. But the disadvantage is that it is strictly dependant on the order with which HTML markup has been laid out. So, for example, if second element out of image-container elements is clicked, the second element out of sliding-div elements will be animated.

Hope this helps in some way.