Jquery Slidetoggle 여러 슬라이딩 div

나는 공정한 검색을 해왔으며 관련 답변을 찾을 수 있습니다. 나는 slidetoggle에 모두 같은 클래스 인 숨겨진 div를 원하지만, 하나가 슬라이드하면 열려있는 다른 슬라이드가 닫힙니다. 또한 토글되고있는 div에 대해서만 Show Information/Hide 정보를 변경하고 싶습니다. 여기 Jquery Slidetoggle 여러 슬라이딩 div

내 자바 스크립트 내가 JQuery와 새로운 오전

$(document).ready(function() { 
    // put all your jQuery goodness in here. 
    $('.content').hide(); 
    $('.content.open').show(); 

    $('.opener').click(function() { 


     $(this).parent().next('.content').slideToggle(300, function() { 
      $(".opener").text($(this).is(':visible') ? "Hide Information" : "Click Here For Information"); 
     }); 
    }); 
});

내 HTML

<p> 
    <a class="opener" href="javascript:slideTogle();">Click Here For Information</a> 
</p> 
<div class="content"> 
    <p>If you are looking to purchase your first home, reduce your existing monthly 
     repayments, pay off you mortgage early, raise cash for home improvements 
     or to pay off debt or even buy a property to let out we are able to assist 
     and advise you from start to finish. We have access to a wide range of 
     lenders offering independent mortgages to suit you.</p> 
    <p>Your home may be repossessed if you do not keep up repayments on your 
     mortgage.</p> 
    <ul> 
     <li>First time Buyers</li> 
     <li>Remortgages</li> 
     <li>Capital raising</li> 
     <li>Debt Consolidation</li> 
     <li>Buy To Let</li> 
    </ul> 
</div>

이며, 여기에 /하지만 난 PHP의 기본 지식과 HTML의 좋은 지식을 가지고 자바 스크립트/CSS .

감사합니다.

출처

2012-03-27 user1296747

$ (문서) .ready (함수() { // 여기에 모든 jQuery를 선량을 넣어 var에 showText을 = '추가 정보 & # 9658를 보려면 클릭하세요';. var에 hideText를 = '숨기기 정보 및 # 9660 '; \t $ ('.content.open ') show(); \t $ ('. 오프너 ') (\t $ (this) .parent(). next (' .content ') slideToggle. ('느린 '); \t // 스위치 가시성 \t $ (이) .DATA ('가 is_visible ', $ (이!) .DATA) (' 'is_visible가) ,321 0 // 요소가 표시되는지 숨겨 지는지에 따라 링크를 변경하십시오. \t $ (this) .html ((! is $ this) .data ('is_visible')))? showText : hideText); \t $ ('. 부모, .child'). 숨기기(); \t});}); – user1296747

마찬가지로 this?

$(document).ready(function() { 
    // put all your jQuery goodness in here. 

    $('.opener').click(function (e) { 
     var $opener = $(this); 
     var $content = $opener.parent().next('.content');   

     e.preventDefault(); 

     $content.toggleClass('open').slideToggle(300, function(){ 
      $opener.text($content.hasClass('open')?"Hide Information":"Click Here For Information"); 
     }); 

    }); 
});

출처

2012-03-27 22:59:43 Sinetheta

아래의 주석에 최신 코드를 붙여 넣었습니다. 이제는 여러 div가 있고 선택한 코드를 닫을 때 문을 닫습니다. – user1296747

모든 아코디언이 서로 독립적으로 작동하도록 코드를 변경했습니다. – Sinetheta

이 코드를 사용하여 div를 전혀 열지 않습니다. 귀하의 도움을 주시면 감사하겠습니다. – user1296747

Jquery Slidetoggle 여러 슬라이딩 div

답변

관련 문제