アコーディオン（折畳みコンテンツ）の作成方法を学習します。

アコーディオン

アコーディオンは、大量のコンテンツの非表示と表示とを切り替えたいときに便利です：

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.

アコーディオンの作成

ステップ 1) HTML の追加：

例

<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

ステップ 2) CSS の追加：

例

/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

/* Style the accordion panel. 注: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block;
}

ステップ 3) JavaScript の追加：

例

/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

Try it Yourself »

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

アニメ付きアコーディオンを作成するには、panel と show クラスを次のように変更します。

これにより、アコーディオンが下にスライド（max-height）し、フェードイン（opacity：不透明）します：

例

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
}

Try it Yourself »

アイコンの追加

折りたたみコンテンツが開いているか閉じているかを示す記号を各ボタンに追加します：

例

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

Try it Yourself »

How TO - 折畳み/アコーディオン

アコーディオン

アコーディオンの作成

ステップ 1) HTML の追加：

例

ステップ 2) CSS の追加：

例

ステップ 3) JavaScript の追加：

例

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

例

アイコンの追加

例