jqueryの効果は - スライド隠されたdivのダウン/アップ、現在、隠れて、私は、メインの右側に座っているこのウェブサイト上で見つかったもの、などのjqueryの効果をしたいの隠しdivの

*シナリオjqueryの効果は - スライド隠されたdivのダウン/アップ、現在、隠れて、私は、メインの右側に座っているこのウェブサイト上で見つかったもの、などのjqueryの効果をしたいの隠しdivの

を示しました。フラッシュ追加：

http://www.commbank.com.au/

*問題

私はスタートをしたが、MUY私と一緒に少し暗礁に乗り上げるていますthod ..おそらく私の希望の効果を達成するための最良の方法ではない、アドバイスと事前に感謝してください！

マイコードはここで見つけることができます：

http://jsfiddle.net/gavAusWeb/HSbzC/1/

はまた、私は以下のことが表示されます。

* HTML

<div id="latestNewsJs">    
    <div id="lnClickDivs1" class="sideJsBtns sidejsbtn1"></div> 
    <div id="hiddenDiv1" class="secretDiv"></div> 
    <div id="lnClickDivs2" class="sideJsBtns sidejsbtn2"></div> 
    <div id="hiddenDiv2" class="secretDiv"></div>   
    <div id="lnClickDivs3" class="sideJsBtns sidejsbtn3"></div> 
    <div id="hiddenDiv3" class="secretDiv"></div> 
    <div id="lnClickDivs4" class="sideJsBtns sidejsbtn4"></div> 
    <div id="hiddenDiv4" class="secretDiv"></div> 
</div>

* CSS

あなたのコードで

#latestNewsJs { 
    border:1px solid red; 
    width:106px; 
    min-height:100%; 
} 
#lnClickDivs1 {} 
#lnClickDivs2 {} 
#lnClickDivs3 {} 
#lnClickDivs4 {} 

.sideJsBtns { 
    width:106px; 
    height:30px; 
    position:relative; 
    float:left; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius:5px 5px 5px 5px; 
    border:1px solid #CCCCCC; 
} 

#hiddenDiv1 {} 
#hiddenDiv2 {} 
#hiddenDiv3 {} 
#hiddenDiv4 {} 

.secretDiv { 
    background:orange; 
    width:106px; 
    height:100px; 
    display:none; 
    margin-top:-7px; 
    float:left; 
}

* jqueryの

jQuery.noConflict(); 

jQuery(document).ready(function(){   

    var curI = 0; 

    jQuery('.sideJsBtns').click(function(){ 

     curI = jQuery(this).index() + 1; 

     jQuery(".secretDiv").slideUp("medium"); 

     if (jQuery("#hiddenDiv" + curI).is(":hidden")) 
     { 
      jQuery("#hiddenDiv" + curI).slideDown("medium"); 
     } else { 
      jQuery("#hiddenDiv" + curI).slideUp("medium"); 
     } 

    }); 

});

出典

2011-08-16 gav_aus_web

せずにこのコードを使用し、それを修正し、このバイオリンを見てみましょう私はあなたがいると思うページの、それは通常「アコーデオン」と呼ばれています。 [jQuery UIには1つあります]（http://jqueryui.com/demos/accordion/）。 –

偉大なリンク、ありがとうございます！ ;） –