jQueryのnextUntilを使う
HTMLで、最初は見出しだけが表示されていて、クリックするとその見出しの配下が表示されるページを作ってみます。
jQueryを使います。
HTMLは次の通りです。
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>
<h3>見出し3</h3>
<p>本文。</p>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>
配下と言ってもh2とh3とpは親子関係にはありません。
このような場合はnextUntilを使います。ある要素からある要素までを取得します。
正確には「ある要素の次からある要素の前まで」ですので、ちょうど要素に挟まれた部分を取得できるのです。
サンプルコードは次の通りです。
$("h2").nextUntil("h2").hide();
$("h2").click(function(){
$(this).nextUntil("h2").toggle("fast");
});
$("h2").click(function(){
$(this).nextUntil("h2").toggle("fast");
});
まず、h2とh2に挟まれた部分を非表示にしておきます。
次に、h2をクリックすると、クリックした部分(this)と次のh2に挟まれた部分にtoggleを適用します。toggleは表示と非表示を交互に行います。
TYVM you’ve solved all my proeblms