開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

こんにちは!カスミです。
さて以下のような疑問をお持ちでしょうか?
開閉するアコーディオンリストがあり、一つのリスト要素を開いたら、他の開きっぱだったリスト要素を自動的に閉じさせたい!
このような疑問に回答します。
本記事では、コードペンでの実装例を元に解説します。
※jqueryを使ったアコーディオンが対象です。
それ以外は対応しておりません。
コードペンを使った、他を閉じる例
See the Pen 開閉アコーディオン by Kohei (@kouk05) on CodePen.dark
上記が、コードペンを使った他を閉じる例です。
詳細としては、以下になります。
開閉するアコーディオンを用意
まずは開閉するアコーディオンを用意しましょう。
用意されてない方は、とりあえず、上記コードペンからHTML、CSS、jQeryのソースをコピペしてください。
実際、これで他を閉じるアコーディオンは実装されてます。
他を閉じるコードを追加
$('dt').not($(this)).siblings('dd').slideUp();
「他を閉じさせる」ためのコードは、jqueryの記述内にあった、上記コードが重要になります。
クリックするセレクタを指定した、後の.not($(this))の部分です。
こちらを入れてあげることで、現在進行形で動作させてるアコーディオン以外は閉じさせる動作になります。
以上で完了です。
まとめ
他を閉じさせる動作は、ヘッダーメニューの、連なった開閉アコーディオンの実装で、役に立つかと思います。
解説を終わります。