show hide с тем же именем класса при нажатии

Question

Я пытаюсь создать простой список с некоторыми вопросами и ответами. При нажатии на вопрос ответ отображается ниже, при загрузке страницы он скрыт. Я использую тот же класс для всех вопросов, поэтому проблема заключается в том, когда я нажимаю, чтобы развернуть ответ, все приведенные ниже ответы расширяются. Как я могу это решить? Ниже приведен сценарий. Jsfiddle: http://jsfiddle.net/36Y5w/

<script type="text/javascript"> 
$(document).ready(function() { 

    $('.faq_content').hide(); 

    $('.faq_circle').click(function(){ 
     var $target = $('.faq_content'); 
     if($target.is(':visible')){ 
      $target.slideUp(400,function(){ 
       $target.addClass('feature-folded'); 
      }); 
      $(this).text('+'); 
     } 
     else{ 
      $target.removeClass('feature-folded'); 
      $target.slideDown(); 
      $(this).text('-'); 
     } 
    }); 

}); 
</script> 

Answer 1

$('.faq_circle').click(function(){ 
     var $target = $(this).next().children('.faq_content'); 
     if($target.is(':visible')){ 
      $target.slideUp(400,function(){ 
       $target.addClass('feature-folded'); 
      }); 
      $(this).text('+'); 
     } 
     else{ 
      $target.removeClass('feature-folded'); 
      $target.slideDown(); 
      $(this).text('-'); 
     } 
    }); 

Answer 2

Вместо ориентации всех элементов с классом «.faq_content», просто выберите следующий элемент с этим классом. Это должно делать свое дело.

var $target = $(this).next('.faq_content');