jQuery -> toggle function

Question

이벤트 목록이 있습니다. 배열에 foreach를 사용하여 데이터를 검색합니다. 스팬 (SPAN) .club 목록 - 쇼 - 작은 정보를 클릭하면

<article class="club-list-club"> 
      <h2 class="club-list-title"> 
       <a href="'.url('clubs/'.$club->getSlug()).'">'.$club->getClubnaam().'</a> 
      </h2> 
      <h2 class="club-list-location"> 
       '.$club->getWoonplaats().' 
      </h2> 
      <h2 class="club-list-open-info"> 
       Openingstijden 
      </h2> 

      <h2 class="club-list-big-info"> 
       link2page 
      </h2> 
      <h2 class="club-list-small-info"> 
       <span class="club-list-show-small-info">Show</span> 
      </h2> 
      <div class="more-info hide"> 
       Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle 
       andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de 
       openingstijden en alle andere belangrijke info. 
      </div> 
     </article>'; 

, 난 처음 div.more-정보가 페이드 또는 슬라이드를 전환하려면 : 내 목록처럼 보이는 방법. 어떻게 내가 아래에있는 내 코드에서 잘못하고있는 중이 야 :

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.club-list-show-small-info').click(function(){ 
     $(this).next('div').slideToggle('.hide'); 
    }); 
}); 
</script> 

Answer 1

click 이벤트가 span 요소에 바인딩의 div는 다음 형제 요소되지는 div은 span의 부모 h2 요소의 다음 형제입니다. 그래서

$(document).ready(function() { 
    $('.club-list-show-small-info').click(function() { 
     $(this).parent().next('div').slideToggle(); 
    }); 
}); 

데모 : Fiddle는

Answer 2

그것은해야한다 : 표시하거나 숨기고 싶은 정보] 당신의 .club-list-show-small-info 범위

의 parent()입니다 .club-list-small-info의 next() 형제

$('.club-list-show-small-info').click(function(){ 
    $(this).parent().next().slideToggle(); 
}); 

때문에

Demo

당신이 fade 효과를 갖고 싶어

, 당신은 fadeToggle() 사용할 수 있습니다

$('.club-list-show-small-info').click(function(){ 
    $(this).parent().next().fadeToggle(); 
}); 

Demo