DOMの兄弟要素（siblings）をクリックイベントに応じてjqueryで閉じたり開いたりする

<h1>ページタイトル
<h2>項目１
<ul>
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
</ul>
<h2>項目２
<ul>
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
</ul>
<h2>項目３
<ul>
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
</ul>
<h2>項目４
<ul>
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
  <li>テキストテキストテキストテキスト
</ul>

といったhtmlがあり、h2をクリックするとそれに続くテキストが表示されるという開閉式コンテンツを作る場合。

$(function() {
     $("h2").each(function(i){
          $("h2").eq(i).nextUntil($("h2").eq(i+1)).addClass("hide");
     $("h2").eq(i).click(function(){
          if($("h2").eq(i).nextUntil($("h2").eq(i+1)).hasClass("hide")){
               $("h2").eq(i).nextUntil($("h2").eq(i+1)).removeClass("hide");
                } else {
               $("h2").eq(i).nextUntil($("h2").eq(i+1)).addClass("hide");
          }
     });
  });
});

.h2 { cursor: pointer } 
.hide { display: none } 

.nextUntil(n)メソッドは「次のnまで」を指定できるため親子関係の無いDOMを操作する際便利ですね。

デモはこちら
http://jsdo.it/dentaq/ytzH