アコーディオンパネル

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

アコーディオンパネル

アコーディオンパネルは、詳細を畳んでおいて必要なときだけ開いてもらうUIです。ページ全体の見通しを保ちながら情報量を確保できるため、FAQ・料金の内訳・手順の補足説明など、「全員には要らないが、必要な人には必須」の情報と相性が抜群です。

デモは「独立して開閉する」型と「ひとつ開くと他が閉じる」排他型の2種類。この2つの使い分け――読み比べたいなら独立、順に読ませたいなら排他――が設計の勘所です。

おさえておきたいところ

「アコーディオンパネル」を使う目的と使いどころはこんな感じです。
　　　　　　　　　　　　目的：連続する内容をまとめ、項目の全体像を先に伝える
動きのきっかけ：画面の読み込み中 / クリック

任意の場所をクリックすると隠れていた内容が開く

任意の場所をクリックすると隠れていた内容が開き、先に開いていた内容が閉じる

実務メモ（2026年追記）

2026年のいま新しく作るなら、まず<details>/<summary>要素を検討します。JSなしで開閉が動き、キーボード対応も標準装備。さらにname属性を揃えるだけで排他開閉（ひとつ開くと他が閉じる）までネイティブで書けるようになりました。JS実装が要るのは、開閉に高さのアニメーションを付けたい場合くらいです（grid-template-rows: 0fr→1frのCSSテクニックでも代用できます）。

• 畳んだ中身も検索エンジンは読み取る。モバイルUIとして正当な手法なのでSEOを恐れず使ってよい
• 開閉トリガーの行全体をクリック可能に（テキストだけを当たり判定にしない）
• FAQをアコーディオンにするなら、FAQの構造化データ（schema）併用も検討
• 領域を切り替える別解としてタブメニューがあります

次回の予定

「ツールチップ」「ニュースティッカー」を作ってみようと思います＼＼\٩( ‘ω’ )و //／／