표시기로 div를 숨기고 표시하는 jQuery

Question

아래의 jQuery를 사용하여 div의 텍스트 숨기기 및 표시 전환 : 그래픽에 위아래 화살표와 같은 일종의 표시기를 추가하려면 어떻게해야합니까? divs는 열려 있고 닫혀 있습니까? 그렇게하는 가장 좋은 방법은 무엇입니까? 두 개의 이미지? CSS 스프라이트? 그리고 가장 중요한 것은 그것이 JS에 어떻게 통합 될까요?

나는 각 div에 임의의 숫자를 할당 한 다른 jQuery를보고 어떤 것이 열려 있고 어느 것이 닫혀 있는지 결정하고 두 이미지 중 하나를 전환합니다. 하지만 WordPress 루프에서 php를 사용하여 게시물을 표시하면 루프에서 증가하는 문제가 발생하므로 제목 div의 이름을 변경하지 않아도되는 더 쉬운 방법이 있어야합니다. 감사합니다 ....

이 JS는 표시 및 숨기기를 시작합니다. 각 div는 독립적으로 확장 및 축소 할 수 있습니다.

<div class="collapser"> 

<p class="title">Header-1 </p> 
<div class="contents">Lorem ipsum</div> 

<p class="title">Header-2</p> 
<div class="contents">Lorem ipsum </div> 

<p class="title">Header-3</p> 
<div class="contents">Lorem ipsum</div> 

</div> 

CSS의 임의입니다 :

.collapser { 
margin: 0; 
padding: 0; 
width: 500px; 
} 

.title { 
margin: 1px; 
color: #fff; 
padding: 3px 10px; 
cursor: pointer; 
position: relative; 
background-color:#c30; 
} 

.contents { 
padding: 5px 10px; 
background-color:#fafafa; 
} 

Answer 1

당신은 클릭 핸들러 클래스를 설정 toggleClass 방법을 사용할 수 있습니다

$(document).ready(function() { 
    $('div.demo-show:eq(0)> div').hide(); 
    $('div.demo-show:eq(0)> h3').click(function() { 
    $(this).next().slideToggle('fast'); 
    }); 
}); 

이

는 함께 작동하는 HTML이다. 위 또는 아래로. 각 클래스에는 적절한 배경 이미지 세트가 있습니다.

당신의 클릭 핸들러

$('.collapser').toggleClass('up down'); 

을에서

하고 HTML이

<div class="collapser up"> 
</div>