webサイト制作の勉強|2019年3月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。

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

f:id:yachin29:20190603123125p:plain


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

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

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


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

<h2>パネル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>パネル2<span class="plus-icon"></span></h2>
<ul class="list">
<li>パネル1-1</li>
<li>パネル1-2</li>
<li>パネル1-3</li>
</ul>

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