.slideToggle을 사용하면 어떻게 구체적으로 지정할 수 있습니까?

Question

끔찍한 제목이지만 내 문제의 이름을 지정하는 데 어려움이 있습니다.

나는 단추 하나만 누르면 모두 .slideToggle()이되고 많은 정보를 보여주는 몇 개의 상자를 만들려고합니다. 내 문제는 각 상자에 고유 한 단추가 있어야한다는 것입니다. 왜냐하면 지금 코드로 표시되기 때문에 클릭 한 단추에 관계없이 설명 중 하나만 확장되고 축소됩니다. http://dacc.fredrixdesign.com/sponsors/ :

$(document).ready(function() { 
    $('#sponsor-description').hide(); 

    $('#sponsor .expand').click(function() { 
     $('#sponsor-description').slideToggle('slow'); 
    }); 
}); 

당신은 웹 사이트에서 직접 사용해 볼 수 있습니다 (- 버튼을 주황색을 클릭 "확장") :

나는 다음과 같은 jQuery를 코드를 작성했습니다.

"확장"버튼 중 하나를 클릭하면 해당 설명이 아래로 슬라이드되도록 만들 수 있습니까? 내가 $(this) 어떤 식 으로든 도움이 될 수 있다고 상상하지만, 나는 잘 모르겠다. 감사!

Answer 1

# 스폰서 설명은 ID입니다. 너 정말 이드를 학대하고있어. 요소마다 고유해야합니다. 고유 한 ID를 사용하거나 CSS 클래스에서 더 나은 선택기를 사용하는 것이 좋습니다.

지금은 코드가 실패한 모든 설명 요소의 ID로 스폰서 설명을 사용하고 있습니다.

저는 Wordpress를 모르지만 모든 id 속성을 클래스로 변경하면 황금색이됩니다. 코드를 변경할 수 있다고 가정하면 코드는 다음과 같습니다.

$('.sponsor .expand').click(function() { 
    $(this).parents('.sponsor').children('.sponsor-description').slideToggle('slow'); 
});