Dániel Varga Dániel Varga - 7 months ago 152
Javascript Question

JQuery - Show/hide multiple divs with the same class independently



I want to make a collapsible DIV like this:

If you click on the picture (which is in the table and comes with

show
class) the hidden div slides down (the one with the
content
class) with it's content and if you click on the hide button or anywhere else on the page, the
content
div will slide up.

I want to use multiple tables and hidden divs on the page (with the same classes) so i want to make sure to open them independently.

Here is my JSFiddle document, hope that someone can help.

Thanks in advance!

Answer

You can achieve it with data attributes

<table width="502" style="border:1px solid black; background-color:white;">
  <tr>
    <td align="center" valign="middle" width="300" style="padding:5px">
      Blablabla
    </td>
    <td width="200">
      <a class="show" data-id="1" href="javascript:void(0)"><img src="http://www.placehold.it/200x200"></a>
    </td>
  </tr>
</table>

<div class="content" data-id="1">
  <div class="content-inner">

    <img src="http://www.placehold.it/400x400">
    <p>
      More blablabla
    </p>

    <p class="hide" style="padding-top:50px">Hide</p>
  </div>
</div>

<table width="502" style="border:1px solid black; background-color:white;">
  <tr>
    <td align="center" valign="middle" width="300" style="padding:5px">
      Blablabla
    </td>
    <td width="200">
      <a class="show" data-id="2" href="javascript:void(0)"><img src="http://www.placehold.it/200x200"></a>
    </td>
  </tr>
</table>

<div class="content" data-id="2">
  <div class="content-inner">

    <img src="http://www.placehold.it/400x400">
    <p>
      More blablabla
    </p>

    <p class="hide" style="padding-top:50px">Hide</p>
  </div>
</div>

and change the JS like this

$('.show, .hide').click(function(){
var id = $(this).data('id');

  $('.content[data-id="'+id+'"]').slideToggle('2000', "swing", function() {
  });

});
Comments