여러 SlideToggle jQuery

Question

콘텐츠를 볼 수 있도록 아래로 이동하는 slideToggle이 있습니다. 그러나 지금은 한 페이지에 여러 개가 있습니다. 따라서 클릭하면 콘텐츠를 모두 내리고 볼 수있게됩니다. 내가 뭘하고 싶은지는 하나만 클릭하면 그 하나의 .tst 요소가 토글됩니다.

<script type="text/javascript"> 
    $('.tst').hide(); 
    $("div.slide").addClass('up_arrow') 
    $("div.slide").click(function(){ 
     $("div.slide").toggleClass('up_arrow').toggleClass('down_arrow'); 
     $(".tst").slideToggle('slow', function(){ 
     }); 
     }); 
</script> 

이 그냥 모든 .tst div의 반대로 당신이 클릭을 아래로 슬라이드 만들 수있는 방법이 있나요?

EDIT : 요청 된 HTML 태그는 :

<div class="slide"></div> 
    <div class="tst"> 
     <div class="courseinfo"> 
      <ul> 
       <li> 
        <ul> 
         <li><b>»</b>&nbsp;<a href="#">info</a></li> 
         <li>info</li> 
         <li><span class="rowUCAS">info</span></li> 
         <li><a href="#">External link</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 

Answer 1

대신 함수 내부 선택기를 사용하는 클릭 된 요소를 대상 $(this)를 사용한다. 예 :

<script type="text/javascript"> 
    $('.tst').hide(); 
    $("div.slide").addClass('up_arrow') 
    $("div.slide").click(function(){ 
     $(this).toggleClass('up_arrow').toggleClass('down_arrow'); 
     $(".tst").slideToggle('slow') 
     }); 
</script> 

선택기 $(this)은 이벤트를 트리거하는 요소를 대상으로합니다. 다음 선택이 작동 할

<div class="slide"></div> 
<div class="tst"> 
    ... 
</div> 

:

<div class="slide"> 
    <div class="tst"> 
     ... 
    </div> 
</div> 

:

$("div.slide").click(function(){ 
    $(this).toggleClass('up_arrow').toggleClass('down_arrow'); 
    $(this).next().slideToggle('slow') 
}); 

당신은 div.slide과 같이에서 .tst 중첩에 관심이있을 수 주어진 HTML 마크 업에 따라

이 경우 다음 선택기가 작동합니다

$("div.slide").click(function(){ 
    $(this).toggleClass('up_arrow').toggleClass('down_arrow'); 
    $(this).children('.tst').slideToggle('slow') 
}); 

희망 하시겠습니까?