슬라이드 토글과 토글시 토글시겠습니까?

Question

버튼을 클릭하면 텍스트를 전환하고 "더 읽기"또는 "덜 읽으세요"라고 말합니다. 내가 다른 버튼을 클릭하면, 나는 이전 버튼이 원래 텍스트로 돌아가

HTML "자세한 내용을"좋아하는 것 :

<div class="accordion"> 
    <div class="abtn"> 
    <input id="A-1" type="radio" value="A"> 
    <label class="chars" for="A-1">A</label> 
    <div class="char-more">Learn More</div> 
</div> 
<div class="acontent">Hello I am content A</div> 

<div class="abtn"> 
    <input id="B-1" type="radio" value="B"> 
    <label class="chars" for="B-1">B</label> 
    <div class="char-more">Learn More</div> 
</div> 
<div class="acontent">Hello I am content B</div> 

<div class="abtn"> 
    <input id="C-1" type="radio" value="C"> 
    <label class="chars" for="C-1">C</label> 
    <div class="char-more">Learn More</div> 
    </div> 
    <div class="acontent">Hello I am content B</div> 
</div> 

jQuery를 :

$(".abtn .char-more").click(function(){ 
     $(this).closest('.abtn').nextAll(".acontent").first().slideToggle("fast") 
     .siblings(".acontent:visible").slideUp('fast'); 
     $(this).html("Read Less"); 
     $(this).siblings(".char-more").html("Read More"); 
    }); 

JsFiddle합니다.

Answer 1

다음과 같은 HTML 구조를 사용하고 (있는 경우)가 활성화 이전 모듈을 찾을 방법을 단순화하고 또한 CSS를 사용하여 약간의 스타일을 추가 할 수 있습니다 각 모듈에 활성 클래스를 추가. 그것은 존재하지 않는 디버그 형제 자매하는 것보다 읽어도 좀 더 직관적이고 nestaAll의

<div class="widgetWrap"> 
    <div class="abtn"> 
     <input id="A-1" type="radio" value="A"> 
     <label class="chars" for="A-1">A</label> 
     <div class="char-more">Learn More</div> 
    </div> 
    <div class="acontent">Hello I am content A</div> 
</div> 

같은 패턴을 따를 것입니다 귀하의 코드

:

$('.char-more').click(function(){ 
     var $prevActive=$('.activeClass'); 
    $prevActive.removeClass('activeClass').find('.char-more').text("Read Less"); 
    $prevActive.find('.acontent').slideUp(); 
    $(this).text("Read Less") 
      .closest('.widgetWrap').addClass('activeClass').find('.acontent').slideDown(); 

})