アコーディオン
コピペですぐ使えるアコーディオンのサンプルコードを動作・特徴別にまとめています。
無料ツール
アコーディオンを自由に作成

見出し・内容・開閉方法・色・サイズ・アイコンなどを設定して、HTML・CSS・JavaScriptを自動生成できます。

アコーディオン作成ツールを使う
新しいタブで開きます

基本

アコーディオンの作り方｜複数の項目を同時に開く方法と1つだけ開く方法
HTML/CSSだけで作るアコーディオン｜複数の項目を同時に開く方法と1つだけ開く方法

開閉

立体的に開くアコーディオンを作る方法
3D回転しながら開閉するアコーディオンを作る方法
スッとスライドして開閉するアコーディオンの作り方
ボタンクリックで指定したアコーディオンを開く方法
ボタンクリックで全て開く・閉じるアコーディオンの作り方
アコーディオンを上下左右に開く方法

アニメーション

立体的に開くアコーディオンを作る方法
3D回転しながら開閉するアコーディオンを作る方法
スッとスライドして開閉するアコーディオンの作り方
開閉時にアイコンが回転するアコーディオンの作り方

レイアウト

縦長アコーディオンを左右に開く方法｜複数開く・1つだけ開く

初期状態

最初から全て開く・指定した項目だけ開くアコーディオンの作り方

自動

指定時間後に自動で開閉するアコーディオンの作り方

操作

マウスホバーで開くアコーディオンの作り方

状態維持

ページを移動しても開閉状態を記憶するアコーディオンの作り方

コンテンツ

アコーディオンにiframeでYouTube・PDF・Googleマップを表示する方法

入れ子

アコーディオン付きドロワーメニューを作る方法
アコーディオン内にアコーディオンを表示する方法

応用

FAQ・Q&A向けアコーディオンの作り方