2012-03-27 5 views
0

私はずっとずっとブラウジングしていますが、私はまだ関連する回答を見つけることができます。私は同じクラスのすべてのdivsをslidetoggleに欲していますが、一方がスライドすると開いているものが閉じます。また、表示/非表示の情報のみを切り替えるdivの変更が必要です。ここでJquery Slidetoggle複数のスライドdiv

は私の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> 

、ここでは私のjavascriptが

$(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"); 
     }); 
    }); 
}); 

である私はjavascriptのjqueryの/に新しいですが、私は、PHPの基本的な知識とHTML/CSSの十分な知識を持っています。

おかげthis同様

+0

$(ドキュメント).ready(関数(){ //ここにすべてのあなたのjQueryの良さを置く するvar showTextを= '追加情報&#9658のためにクリックしてください';。 するvar hideTextを= '隠す情報& #9660 '; \t $(' content.open。 ')ショー();。 \t $('。オープナー ')をクリックします(関数(){ \t $(この).parent()次の(。。' .content ')slideToggle。(' 遅い '); // \tスイッチ視界 \t $(この).dataセクション(' がis_visible」、$(本!).dataセクション)( '' is_visible)は、 \t //要素が表示されるか隠されるかによってリンクを変更する \t $(this).html(($ this).data( 'is_visible')))? showText:hideText); \t $( '。親、.child')。hide(); \t});}); – user1296747

答えて

0

$(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"); 
     }); 

    }); 
});​ 
+0

私は最近のコードを下のコメントに貼り付けました。問題は、複数のdivがあり、選択したコードを閉じるときに問題が発生します。 – user1296747

+0

すべてのアコーディオンが互いに独立して動作するようにコードを変更しました。 – Sinetheta

+0

このコードを使用してdivを開けません。あなたの助けに感謝します。 – user1296747