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

こんにちは!カスミです。

さて以下のような疑問をお持ちでしょうか?

開閉するアコーディオンリストがあり、一つのリスト要素を開いたら、他の開きっぱだったリスト要素を自動的に閉じさせたい!

このような疑問に回答します。

本記事では、コードペンでの実装例を元に解説します。

※jqueryを使ったアコーディオンが対象です。
それ以外は対応しておりません。

コードペンを使った、他を閉じる例

See the Pen 開閉アコーディオン by Kohei (@kouk05) on CodePen.dark

上記が、コードペンを使った他を閉じる例です。

詳細としては、以下になります。

開閉するアコーディオンを用意

まずは開閉するアコーディオンを用意しましょう。

用意されてない方は、とりあえず、上記コードペンからHTML、CSS、jQeryのソースをコピペしてください。

実際、これで他を閉じるアコーディオンは実装されてます。

他を閉じるコードを追加

$('dt').not($(this)).siblings('dd').slideUp();

「他を閉じさせる」ためのコードは、jqueryの記述内にあった、上記コードが重要になります。

クリックするセレクタを指定した、後の.not($(this))の部分です。

こちらを入れてあげることで、現在進行形で動作させてるアコーディオン以外は閉じさせる動作になります。

以上で完了です。

まとめ

他を閉じさせる動作は、ヘッダーメニューの、連なった開閉アコーディオンの実装で、役に立つかと思います。

解説を終わります。

Ads

関連記事

JavaScript プログラミング

【簡単】JavaScriptを使って文字列を数値、数値を文字列に変換する方法

2022.02.06
28
WordPress プログラミング

ワードプレスのRSSフィードでサムネイル画像(アイキャッチ)を取得する方法【簡単】

2020.05.27
415
HTMLCSS プログラミング

スマホなどでaタグのリンクが2回タップしないと機能しない原因

2021.01.17
441
Illustrator プログラミング

【イラストレーター】SVGの書き出しがズレたり・崩れたりして綺麗に書き出しできない【簡単解決】

2021.04.07
694