アコーディオンは、セクションに分割したコンテンツの表示（および非表示）に使用します。

どのように動作するか確認するため、下の "Open Section" ボタンをクリックしてください：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link 1 Link 2 Link 3

Accordion with Images:

Trolltunga, Norway

w3-accordion クラスはアコーディオンを定義し、w3-accordion-content クラスは表示部分を定義します：

例

<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Open Section 1
</button>
<div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align">
    Open Section 2
</button>
<div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
</div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

Try it Yourself ❯

全ての HTML 要素は、アコーディオンを開くための要素にも、アコーディオンのコンテンツを開くための要素にも使用することができます。

アコーディオン対ドロップダウン

下のリストは、アコーディオンとドロップダウンの違いを示しています：

Accordions

Link 1 Link 2 Link 3

コンテンツの幅は 100% です (親要素の幅全体に広がります)
開いたとき、もし有った場合は、ページコンテンツを押し下げます（position:relative）
大抵は、複数のセクションを「開く」ために使用します

ドロップダウン

コンテンツの幅は最小 160px で、必要に応じてそれ以上に広げられます
開いたとき、ページのコンテンツの上に置かれます (position:absolute)
大抵は、1つのセクションを「開く」ために使用します

アコーディオン・ボタン

アコーディオンのコンテンツを開くためには、全ての HTML 要素を使用することができます。アコーディオンのコンテンツの場合は、親要素の幅全体（幅 100%）に広がるため、w3-btn-block を持つボタンの方が好ましと思われます。 W3.CSS のボタンは、デフォルトで中央揃えになることに注意してください。左揃えにしたい場合は、代わりに w3-left-align クラスを使用します。しかし、我々のアプローチに従う必要はありません - アコーディオンはどちらの方法でも見映え良さに変わりがありません：

Lorem ipsum...

Centered content as well!

例

<div class="w3-accordion w3-light-grey">
<button onclick="myFunc('Demo1')" class="w3-btn">
    Normal button
</button>
<div id="Demo1" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo2')" class="w3-btn-block w3-left-align w3-green">
    Left aligned & full-width
</button>
<div id="Demo2" class="w3-accordion-content">
    <p>Lorem ipsum...</p>
</div>
<button onclick="myFunc('Demo3')" class="w3-btn-block w3-red">
Centered & full-width
</button>
<div id="Demo3" class="w3-accordion-content w3-center">
    <p>Centered content as well!</p>
</div>
</div>

Try it Yourself ❯

アクティブなアコーディオン・ボタン

開いた（クリックした）アコーディオンを強調するためには JavaScript を使用します：

例

// Add the w3-red class to all opened accordions
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-red";
} else {
x.className = x.className.replace("w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace("w3-red", "");
}

Try it Yourself ❯

アコーディオンの幅

デフォルトでのアコーディオンの幅は 100% です。これを無効にするには、w3-accordion コンテナの width プロパティを変更します：

例

Try it Yourself ❯

アコーディオンのコンテンツ

リンク付きアコーディオン：

例

<div class="w3-accordion w3-light-grey">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>
</div>

Try it Yourself ❯

リストを持ったカードのようなアコーディオン：

例

<div class="w3-accordion w3-card-4">
<button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align">
    Accordion
</button>
<div id="Demo1" class="w3-accordion-content">
    <ul class="w3-ul">
      <li>Jill</li>
      <li>Eve</li>
      <li>Adam</li>
    </ul>
</div>
</div>

Try it Yourself ❯

サイドナビ内のアコーディオン (注: サイドナビゲーションについては、後で詳しく説明します)：

例

<nav class="w3-sidenav w3-light-grey w3-card-2" style="width:200px;">
<a href="#">Link</a>
<div class="w3-accordion">
    <a onclick="myAccFunc()" href="#">Accordion</a>
    <div id="demoAcc" class="w3-accordion-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<div class="w3-dropdown-click">
    <a onclick="myDropFunc()" href="#">Dropdown</a>
    <div id="demoDrop" class="w3-dropdown-content w3-white w3-card-4">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</div>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>

Try it Yourself ❯

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

アコーディオンのコンテンツをフェードイン、ズームインまたはスライドインするには、 w3-animate-クラス の何れかを使用します：

W3.CSS アコーディオン

アコーディオン

例

アコーディオン対ドロップダウン

Accordions

ドロップダウン

アコーディオン・ボタン

例

アクティブなアコーディオン・ボタン

例

アコーディオンの幅

例

アコーディオンのコンテンツ

リンク付きアコーディオン：

例

リストを持ったカードのようなアコーディオン：

例

サイドナビ内のアコーディオン (注: サイドナビゲーションについては、後で詳しく説明します)：

例

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

例