
今回は、パネル部分が展開されると他のパネル部分は閉じるようにしたいので、
「開いているパネル部分以外のパネル部分は閉じる」という命令が必要です。
$('ul').not($(this).next('ul'))
という記述で、複数あるulの中で、「クリックされたthisのnextのul以外のul」という指定が出来るようになります。
<div class="container"> <h1>アコーディオンパネル</h1> <div class="box"> <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> </div> <div class="box"> <h2>パネル2<span class="plus-icon"></span></h2> <ul class="list"> <li>パネル1-1</li> <li>パネル1-2</li> <li>パネル1-3</li> </ul> </div> <div class="box"> <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> </div>
コメント