WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

アコーディオンパネルの作成

f:id:yachin29:20190603123125p:plain


今回は、パネル部分が展開されると他のパネル部分は閉じるようにしたいので、
「開いているパネル部分以外のパネル部分は閉じる」という命令が必要です。

$('ul').not($(this).next('ul'))

という記述で、複数あるulの中で、「クリックされたthisのnextのul以外のul」という指定が出来るようになります。


<div class="container">
<h1>アコーディオンパネル</h1>

<h2 class="panel">パネル1<span class="plus-icon"></span></h2>
<ul class="list show">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>

<h2 class="panel">パネル2<span class="plus-icon"></span></h2>
<ul class="list">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>

<h2 class="panel">パネル3<span class="plus-icon"></span></h2>
<ul class="list">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>
</div>