Show/Hide two Divs with Jquery

Question

i have two div's:

         <a href="#" class="component_expand"></a>
        <div class="component_wrapper">

        </div>

         <a href="#" class="component_expand"></a>
        <div class="component_wrapper">

        </div>

Jquery code:

<script type="text/javascript">

    $(document).ready(function(){

    $(".component_wrapper").hide();
    $(".component_expand").show();

    $('.component_expand').click(function(){
    $(".component_wrapper").slideToggle();
    });

  });

  </script>

I try every time I click on "component expand" one DIV open. Now open two I'd be happy with who they help me on

Answer 1

You need to make your selector specific, use next .

$(this).next().slideToggle();

Try:

 $(document).ready(function(){
    $(".component_wrapper").hide(); //You can do this using css rule itself
    $(".component_expand").show().click(function(){
        $(this).next().slideToggle();
    });
  });

Demo

Answer 2

Use an instance of this and .next

$('.component_expand').click(function(){
    $(this).next(".component_wrapper").slideToggle();
});