作るのdivは（開いていない）上記のdivが開かれたときに下にスライド

Question

だからここに私の質問です - と私はあまりにもとても我慢してください、まだプログラミングに精通していないよ：

私が持っているしたいと思います

私のページ上のオブジェクトのリスト。それぞれがdivを開くためのトグルとして機能します。その部分は私がダウンしている！私が理解できないことは、開いているオブジェクトの下のdivが新しく開いたdivの下にスライドするようにする方法です。現在、彼らは開いているdiv内のコンテンツの上に座っているだけです。ありがとう！

Answer 1

アコーディオンエフェクトと呼ばれる。 jQueryのUIアコーディオンエフェクトをチェックしてください。here

これは非常に簡単なバージョンのアコーディオンエフェクトです。jQueryを使用して作成しました。

Answer 2

あなたが求めている効果は、すでにjQueryのjavascriptライブラリから入手できます。 jQuery ui抽象化ではaccordionの効果が得られます。 jqueryui.comから

：それはわずかなプロジェクトのためだ場合

<!-- this is the format of the html markup needed --> 
<div id="accordion"> 
    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 
    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 
</div> 

と

<script> 
    //and the JavaScript code for it 
     $(function() { 
     $("#accordion").accordion(); 
    }); 
</script> 

Answer 3

してください、jQueryのUIを使用しないでください。あなたは、トリガーがクリックされたときに開かれているすべてのパネルを閉じて、最も近いボタンの横にパネルを開くには、通常の方法を使用することができます。

$(function() { 
    // Hide all panels 
    $('#accordion .content').hide(); 
    // Add active class to the first trigger, then find the next panel and open with .slideDown() effect 
    $('#accordion h2:first').addClass('active').next().slideDown('slow'); 
    // When the trigger is clicked... 
    $('#accordion h2').click(function() { 
     if($(this).next().is(':hidden')) { 
      // Remove all "active" classes and close all the panels that has been opened. 
      $('#accordion h2').removeClass('active').next().slideUp('slow'); 
      // Open one panel that placed right next to the trigger 
      // only if the next panel is hidden 
      $(this).toggleClass('active').next().slideDown('slow'); 
     } 
    }); 
}); 

は

次に例を示します。http://jsfiddle.net/tovic/CzE3q/ ・ホープこのヘルプ:)