Different content showing on click
13:54 26 Feb 2016

I managed to make it so that when I click on a button, a div shows/hides, thanks to this simple script:

$(document).ready(function(){

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

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

});

Now I'd like to do the same thing for multiple divs in the same page, but if I use that same script, it will show every hidden div in my page, not just the one below the clicked button. Can anyone help me understand how to modify it?

Here's My DEMO you can clearly see the problem.

EDIT : The left square is supposed to show an image, but I haven't uploaded one yet.

javascript jquery html css