jQueryの：一つの機能を持つ複数のセクションに切り替え高さ

Question

私は複数のセクションを持っている、3は正確には、基本的なレイアウトで様々な高さの：私は最初にそれらを表示する方法を探しています

<section> 
     <h2>My heading</h2> 
    </section> 

ユーザーが<h2>をクリックすると、そのセクションが68pxの高さに減少します。主な問題は、各セクションの高さが異なることです（最初のセクションは478px、2番目のセクションは2118px、3番目のセクションは247px）が、セクションごとに別々の関数を記述したくないので、 1。私が最初のセクションを閉じ、それを再度開くのではなく、2番目のセクションの<h2>をクリックするまでうまくいきました。それが問題の始まりです。だから私の質問は、これを行うためにとにかくそこにいるか、私は各セクションのための別の機能が必要ですか？

sectionSize = "normal"; 
$(document).ready(function(){ 
    //var sectionSize = "normal"; 
    $("h2").click(function(){ 
    var parentSection = $(this).parents("section");  
    if (sectionSize == "normal") { 
     sectionHeight = parentSection.height(); 
     parentSection.animate({height:"68px"},"fast"), 
     sectionSize = "collapsed"; 
    } else { 
     parentSection.animate({height:sectionHeight},"fast"), 
     sectionSize = "normal"; 
    } 
    }); 
}); 

私はここにさらに肉付けHTMLとCSSでhttp://jsfiddle.net/Skooljester/94yqX/をより完全なバージョンを持っています。

Answer 1

よりもむしろグローバル変数（とにかくグローバル変数を使用することが一般的に悪い）で高さを保存を使用して、あなたのページを設定するに見ます。 jqueryののデータ（）関数を使って要素に対してそれを保存：クリック機能

Answer 2

slideToggle（）をご覧ください。

http://api.jquery.com/slideToggle/

私のような、あなたのH2タグ下のクラスにコンテナを作成します。、

<h2>Header</h2> 
<div class="slideThis"> 
some content 
</div> 

次にこれに似

書き込みいくつかのjQuery：

$('h2').click(function(){ 
     $(this).next('.slideThis').slideToggle('slow'); 
}); 

を

OR ......

jQueryのUIのアコーディオン

http://jqueryui.com/demos/accordion/

Answer 3

のための完全なコードで更新

var parentSection = $(this).parents("section"); 
var sectionSize = $(this).data('sectionSize') || "normal"; 
if (sectionSize == "normal") { 
    $(this).data('sectionHeight' parentSection.height()); 
    parentSection.animate({height:"68px"},"fast"), 
    $(this).data('sectionSize', 'collapsed'); 
} 
else { 
    parentSection.animate({height:$(this).data('sectionHeight')},"fast"), 
    $(this).data('sectionSize', 'normal'); 
} 

あなたがそれぞれに知っているように、あなたはセクションのデフォルトの高さを格納できる場所にクリックそのセクションの高さを設定します。 http://jsfiddle.net/uchV3/