Question

I have a script that shows more info when clicked and when clicked again it hides the info. The problem is that when clicked it shows and hides information of all the div’s with the same class name instead of only the one that was clicked. I was looking around and I would think that I need to add “this” somewhere in it so that it only affects the clicked object. Could someone explain what I am doing wrong and how to achieve this effect?

Javascript

 <script type="text/javascript"> 
   this$(document).ready(function(){
   $(".toggle").click(function(){
      $(".hiddenDiv").slideToggle("slow");
        });
   });
  </script>

HTML

       <span class="toggle" onClick='return false'>
            <h4 class='arrow'>Group Health Insurance</h4>
        </span>

        <div class='hiddenDiv'>
            <p><img src="../images/group.jpg" border="0" alt="Group Insurance" align="left" hspace="5" />Group health insurance coverage is a policy that is purchased by an employer and is offered to eligible employees of the company blah blah blah</p>
        </div>
        <hr />
        <span class="toggle" onClick='return false'>
            <h4 class='arrow'>Insurance</h4>
        </span>

        <div class='hiddenDiv'>
            <p><img src="../images/group.jpg" border="0" alt="Group Insurance" align="left" hspace="5" />More info about other types of insurance blah blah blah</p>
        </div>
        <hr />

Thanks for your help in advance!

Answer 1

It looks like you’re trying to toggle the style of the next sibling with the hiddenDiv class.

You can get the next sibling of an element matching a selector using .next:

$myEl.next('.hiddenDiv');

Since you’re looking for the next sibling of the button that was clicked, you can use this inside the click handler to get the button.

$(document).ready(function(){
    $(".toggle").click(function(){
        $(this).next(".hiddenDiv").slideToggle("slow");
    });
});