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

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

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

基本

基本のアコーディオンを作る方法
HTML/CSSだけで動くアコーディオンの作り方

開閉

外側クリックで全て閉じられるアコーディオンの作り方
ESCキーで全て閉じられるアコーディオンの作り方
HTML/CSSだけで1つしか開かないアコーディオンを作る方法
1つしか開かないアコーディオンを作る方法
ボタンクリックで指定したアコーディオンを開く方法
ボタンクリックで全て開く・閉じるアコーディオンを作る方法
ボタンクリックで全て閉じられるアコーディオンの作り方
ボタンクリックで全て開くアコーディオンを作る方法

アニメーション

開閉アイコンが90度回転するアコーディオンを作る方法
開閉アイコンが180度回転するアコーディオンを作る方法
立体的に開くアコーディオンを作る方法
3D回転しながら開閉するアコーディオンを作る方法
フェードイン・フェードアウトで開閉するアコーディオンの作り方

デザイン

立体的な開閉ボタン付きアコーディオンを作る方法

レイアウト

1つだけ開ける縦長アコーディオンを左方向に開く方法
1つだけ開ける縦長アコーディオンを右方向に開く方法
複数開ける縦長アコーディオンを左方向に開く方法
複数開ける縦長アコーディオンを右方向に開く方法
左方向に開くアコーディオンの作り方
右方向に開くアコーディオンの作り方
下方向に開くアコーディオンの作り方
上方向に開くアコーディオンの作り方

初期状態

最初から1つだけ開いているアコーディオンの作り方
最初から全て開いたアコーディオンを作る方法

自動

指定時間後に自動で開くアコーディオンを作る方法
指定時間後に自動で閉じるアコーディオンを作る方法

操作

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

状態維持

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

コンテンツ

画像をアコーディオンで表示する方法
画像ギャラリーをアコーディオンで表示する方法
YouTube動画をアコーディオンに表示する方法
PDFをアコーディオンに表示する方法
iframeをアコーディオンに表示する方法
Googleマップをアコーディオンに表示する方法

入れ子

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

応用

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