HTMLを使用してアコーディオン形式のインターフェースを作成する方法について、詳細に解説します。このページではアコーディオンの基本構造、JavaScriptを使った動的な実装方法、そして複数の実例を紹介します。

目次

• アコーディオンの基本構造
• JavaScriptを使ったアコーディオン
• 応用例
• アクセシビリティを考慮したアコーディオン

アコーディオンの基本構造

アコーディオンは、クリックすることで内容が展開・折りたたまれるUIコンポーネントです。基本的なHTML構造は以下の通りです。

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">項目1</button>
        <div class="accordion-content">
            内容1
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">項目2</button>
        <div class="accordion-content">
            内容2
        </div>
    </div>
</div>
    

この基本構造をCSSやJavaScriptでスタイリングし、動作を実現します。

JavaScriptを使ったアコーディオン

JavaScriptを用いることで、クリックイベントに応じてアコーディオンを展開・折りたたむことができます。以下はその実装例です。

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">項目1</button>
        <div class="accordion-content" style="display: none;">
            内容1
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">項目2</button>
        <div class="accordion-content" style="display: none;">
            内容2
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(button => {
        button.addEventListener('click', () => {
            const content = button.nextElementSibling;
            if (content.style.display === 'none') {
                content.style.display = 'block';
            } else {
                content.style.display = 'none';
            }
        });
    });
</script>
    

このコードは、アコーディオン項目をクリックした際に内容の表示・非表示を切り替えます。

応用例

以下は、より高度なアコーディオンの例です。

アニメーション付きアコーディオン

内容が滑らかに展開されるアコーディオンを実装するには、CSSの transition プロパティを使用します。

<style>
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.accordion-content.active {
    max-height: 200px; /* 実際の内容に合わせて調整 */
}
</style>

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">項目1</button>
        <div class="accordion-content">
            内容1
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(button => {
        button.addEventListener('click', () => {
            const content = button.nextElementSibling;
            content.classList.toggle('active');
        });
    });
</script>
    

複数の項目を同時に開けるアコーディオン

以下のコードは、複数の項目を同時に開けるアコーディオンです。

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">項目1</button>
        <div class="accordion-content">
            内容1
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">項目2</button>
        <div class="accordion-content">
            内容2
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(button => {
        button.addEventListener('click', () => {
            button.nextElementSibling.classList.toggle('active');
        });
    });
</script>
    

アクセシビリティを考慮したアコーディオン

アコーディオンのアクセシビリティを向上させるには、ARIA属性を使用することが推奨されます。以下はその例です。

<div class="accordion" role="tablist">
    <div class="accordion-item">
        <button class="accordion-header" aria-expanded="false" aria-controls="section1">項目1</button>
        <div id="section1" class="accordion-content" role="region" hidden>
            内容1
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.accordion-header').forEach(button => {
        button.addEventListener('click', () => {
            const expanded = button.getAttribute('aria-expanded') === 'true';
            button.setAttribute('aria-expanded', !expanded);
            const content = document.getElementById(button.getAttribute('aria-controls'));
            content.hidden = expanded;
        });
    });
</script>
    

このコードはARIA属性を使用し、スクリーンリーダーなどの支援技術でもアコーディオンが利用可能になるようにします。