Как показать и скрыть div

Question

Я создаю страницу, в которой, когда я нажимаю на текст, появляется div, и когда я нажимаю на тот же текст, то исчезает div.

Вот мой HTML код:

<div id="description" class="tab-pane fade"> 
    <div class="faq-row">      
     <a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a> 
    </div> 
    <div class="col-md-12 faq-row-content">      
     <ul> 
      <li> 
       LR's spacious apartments provide ample room for work and play. 
      </li> 
      <li> 
       Guests can access high speed internet and cable television from every room. 
      </li> 

     </ul> 
    </div>      
    <div class="faq-row"> 
     <a href="javascript:;" class="faq-row-handle">Business Friendly Environment</a> 
    </div> 
    <div class="col-md-12 faq-row-content">      

     <ul> 
      <li> 
       LR's spacious apartments provide ample room for work and play. 
      </li> 
      <li> 
       Guests can access high speed internet and cable television from every room. 
      </li> 

     </ul> 
    </div>      
</div> 

Что мне нужно, когда я нажимаю на первой линии, то первый div появляется и исчезает; и когда я нажимаю на вторую ссылку, появляется и исчезает вторая div. На этом этапе, когда я нажимаю на ссылку, ничего не происходит.

Вот мой JQuery код:

$(document).ready(function(){ 
    $(".faq-row-handle").click(function(){ 
     $(".faq-row-content").slideToggle(); 
    }); 
}); 

Answer 1

Использование $(this) вместо селектора класса для целевой next() элемент к slideToggle():

$(document).ready(function(){ 
    $(".faq-row-handle").click(function(){ 
     $(this).parent().next().slideToggle(); 
    }); 
}); 

See this fiddle