여러 개의 독립적 인 인스턴스를위한 간단한 클래스 기반 jquery show/hide?

Question

ID가 아니라 클래스 만 사용하여 jquery 기반 show/hide (숨겨진 컨텐츠가있는 컨테이너가 뒤 따르고 토글 링크가 상태에 따라 텍스트가 바뀌고 토글 링크가 여러 개)되는 많은 방법이 있습니까? 필자는 합리적으로 문서화되고 기능적인 예를 어디서나 발견하지 못했습니다. 모든 도움에 감사드립니다! 같은 --cg

Answer 1

뭔가 :

<div class="toggleset"> 
    <a class="toggler" href="#">Hide</a> 
    <div class="container"> 
    Data to show/hide 
    </div> 
</div> 

$('.toggler').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Hide" : "Show"); 
    evt.preventDefault(); 
}); 

대신 형제의) (다음 사용하는 경우 외부 DIV 필요하지 않습니다하지만 마크 업에 스크립트 긴밀한 관계.

Answer 2

고마워요, 롭. 잘 작동합니다!

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

$('.toggler.show').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Show less" : "Show more"); 
    $(this).toggleClass('active'); 
}) 

$('.toggler.read').click(function(evt) { 
    var $toggler = $(this); 
    var $container = $toggler.siblings('.container'); 

    $container.toggle(); 
    $toggler.text($container.is(':visible') ? "Read less" : "... Read more"); 
    $(this).toggleClass('active'); 
}) 
evt.preventDefault(); 
}); 
--> 
</script> 

가 어떻게 "슬라이드"토글 JQuery와 활용할 것 : 나는 그렇게 보조 클래스가 토글 텍스트가 두 상태에있는 제어 할 수 있도록 관리했습니다? 나는

$container.slideToggle('fast'); 

처럼 뭔가

$container.toggle(); 

을 변경 시도하지만 토글의 텍스트 변화를 나누기. --cg