MENU
Webコーディング（HTML/CSS/JavaScript）やEC-CUBEカスタマイズ、Webアプリなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. アコーディオンのデザイン7選｜コピペで実装できるコード付き

アコーディオンのデザイン7選｜コピペで実装できるコード付き

HTML/CSS/JavaScript

レスポンシブ対応の実装例＆コード付き！異なるデザインパターンのアコーディオンUIを集めました！
JavaScriptは共通なので、以下よりご利用ください。

JavaScript コードはこちら（全デザイン共通）
document.addEventListener('DOMContentLoaded', function() {
    const accordionButtons = document.querySelectorAll('.btn-box button');
    
    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const container = this.closest('[class^="container-"]');
            const more = container.querySelector('.more');
            const isOpen = more.classList.contains('appear');
                        
            more.classList.toggle('appear');
            
            // ボタンテキストの変更（不要な場合は削除）
            if (this.dataset.defaultText) {
                if (isOpen) {
                    this.textContent = this.dataset.defaultText;
                } else {
                    this.textContent = this.dataset.openText || '閉じる';
                }
            }
        });
    });
});
アコーディオンとは？

アコーディオンは、クリックやタップでコンテンツの開閉を切り替えるUIです。縦に並んだ項目を省スペースで表示でき、FAQやメニューなどによく使われます。

アコーディオンUIの実装方法を詳しく知りたい方はこちら
【JS】「もっと見る」ボタンの実装方法（アコーディオン） クリックすることで、ニュース記事やブログなどの一覧を表示してくれるボタンの実装方法を紹介します。（アコーディオンUIと呼ばれます。） 情報量が多いために普段は隠…
目次

【1】シンプルアコーディオン

  • シンプルで使いやすいデザイン
  • 基本的な開閉アニメーション
  • レスポンシブ対応
  • 軽量で高速
  • カスタマイズしやすい
<div class="container-1">
    <div class="btn-box">
        <button data-default-text="シンプルアコーディオン" data-open-text="閉じる">シンプルアコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>シンプルで使いやすいデザイン</li>
            <li>基本的な開閉アニメーション</li>
            <li>レスポンシブ対応</li>
            <li>軽量で高速</li>
            <li>カスタマイズしやすい</li>
        </ul>
    </div>
</div>

【2】カード風アコーディオン

  • カードのような見た目
  • 影付きで立体感を演出
  • ホバーエフェクト付き
  • スムーズな開閉アニメーション
  • モダンなデザイン
<div class="container-2">
    <div class="btn-box">
        <button data-default-text="カード風アコーディオン" data-open-text="閉じる">カード風アコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>カードのような見た目</li>
            <li>影付きで立体感を演出</li>
            <li>ホバーエフェクト付き</li>
            <li>スムーズな開閉アニメーション</li>
            <li>モダンなデザイン</li>
        </ul>
    </div>
</div>

【3】グラデーションアコーディオン

  • 美しいグラデーション背景
  • カラフルで魅力的
  • アイコン付きボタン
  • 滑らかなアニメーション
  • 視覚的にインパクトのあるデザイン
<div class="container-3">
    <div class="btn-box">
        <button data-default-text="グラデーションアコーディオン" data-open-text="閉じる">グラデーションアコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>美しいグラデーション背景</li>
            <li>カラフルで魅力的</li>
            <li>アイコン付きボタン</li>
            <li>滑らかなアニメーション</li>
            <li>視覚的にインパクトのあるデザイン</li>
        </ul>
    </div>
</div>

【4】ボーダーアコーディオン

  • ボーダーラインを活用
  • ミニマルで洗練されたデザイン
  • 開閉時のボーダーアニメーション
  • タイポグラフィ重視
  • ビジネス向けの落ち着いたデザイン
<div class="container-4">
    <div class="btn-box">
        <button data-default-text="ボーダーアコーディオン" data-open-text="閉じる">ボーダーアコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>ボーダーラインを活用</li>
            <li>ミニマルで洗練されたデザイン</li>
            <li>開閉時のボーダーアニメーション</li>
            <li>タイポグラフィ重視</li>
            <li>ビジネス向けの落ち着いたデザイン</li>
        </ul>
    </div>
</div>

【5】アイコンアコーディオン

  • +/×アイコン付き
  • アイコンの回転アニメーション
  • 直感的な操作感
  • 視覚的なフィードバック
  • ユーザビリティ重視のデザイン
<div class="container-5">
    <div class="btn-box">
        <button data-default-text="アイコンアコーディオン" data-open-text="閉じる">アイコンアコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>+/×アイコン付き</li>
            <li>アイコンの回転アニメーション</li>
            <li>直感的な操作感</li>
            <li>視覚的なフィードバック</li>
            <li>ユーザビリティ重視のデザイン</li>
        </ul>
    </div>
</div>

【6】ネオン風アコーディオン

  • ネオンライト風の光る効果
  • サイバーパンクな雰囲気
  • ホバー時の光るアニメーション
  • ダークテーマに最適
  • インパクトのある演出
<div class="container-6">
    <div class="btn-box">
        <button data-default-text="ネオン風アコーディオン" data-open-text="閉じる">ネオン風アコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>ネオンライト風の光る効果</li>
            <li>サイバーパンクな雰囲気</li>
            <li>ホバー時の光るアニメーション</li>
            <li>ダークテーマに最適</li>
            <li>インパクトのある演出</li>
        </ul>
    </div>
</div>

【7】ガラスモーフィズムアコーディオン

  • ガラス効果の背景
  • ぼかし効果でモダンな見た目
  • 半透明で上品なデザイン
  • 背景との調和が美しい
  • 最新トレンドのデザイン
<div class="container-7">
    <div class="btn-box">
        <button data-default-text="ガラスモーフィズムアコーディオン" data-open-text="閉じる">ガラスモーフィズムアコーディオン</button>
    </div>
    <div class="more">
        <ul>
            <li>ガラス効果の背景</li>
            <li>ぼかし効果でモダンな見た目</li>
            <li>半透明で上品なデザイン</li>
            <li>背景との調和が美しい</li>
            <li>最新トレンドのデザイン</li>
        </ul>
    </div>
</div>
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次