Show and hide multiple divs with same class name not working
<p>I want to show / hide an infinite number of divs all with the same class name. I use JQuery for this. See my jsfiddle: <a href="http://jsfiddle.net/1g2hw6hh/2/" rel="nofollow">http://jsfiddle.net/1g2hw6hh/2/</a></p>

<p>I tried to use the next selector in JQuery</p>

<pre><code>$(document).ready(function() {
  $(".jsonInfo").hide(); // it's obvious
  $(".showJSON").click(function() {  // on click...

    $(".jsonInfo")
      .hide()  // ...hide all other previus opened elements...
      .eq($(this).index('.showJSON')) // ... select right one by index of clicked .showJSON element...
       .toggle(); // and show/hide it
  });
});
</code></pre>

<p>How do I fix this and get the divs to show/hide independently?</p>