detail要素を使ってhtmlのみで実装するアコーディオン

HTML5で導入されたdetails要素を使ってシンプルなアコーディオンを実装する方法を紹介します。
JavaScriptやjQueryを使わず、純粋なHTMLとCSSだけでアコーディオンを実現することができます。

<details>要素とは

details要素は、HTML5で導入された新しい要素で、デフォルトで折りたたみ可能なコンテンツを作成することができます。
summary要素と組み合わせることで、アコーディオンのようなインタラクティブな要素を簡単に作ることができます。

以下に、details要素を使ったアコーディオンの実装方法を示します。

DEMO

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras porttitor metus laoreet lacinia.

Section 2

Aliquam fringilla, sapien eget scelerisque placerat, lorem libero cursus lorem, sed sodales lorem libero eu sapien. Nunc mattis.

Section 3

Morbi vitae viverra dolor. In nunc velit, venenatis sed ligula et, ullamcorper tincidunt lorem. Sed at venenatis lacus, et lacinia nunc.

HTML

<div class="accordion-container">
  <details class="accordion-item" open>
    <summary class="accordion-title">Section 1</summary>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras porttitor metus laoreet lacinia.</p>
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-title">Section 2</summary>
    <div class="accordion-content">
      <p>Aliquam fringilla, sapien eget scelerisque placerat, lorem libero cursus lorem, sed sodales lorem libero eu sapien. Nunc mattis.</p>
    </div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-title">Section 3</summary>
    <div class="accordion-content">
      <p>Morbi vitae viverra dolor. In nunc velit, venenatis sed ligula et, ullamcorper tincidunt lorem. Sed at venenatis lacus, et lacinia nunc.</p>
    </div>
  </details>
</div>

CSS

.accordion-container {
  max-width: 600px;
  margin: 0 auto;
}

.accordion-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.accordion-title {
  font-weight: bold;
  padding: 10px 15px;
  cursor: pointer;
  background-color: #adb2cf;
  color: #fff;
  outline: none;
}

.accordion-content {
  padding: 10px 15px;
  border-top: 1px solid #ccc;
}

.accordion-item[open] .accordion-title {
  background-color: #90aaf7;
  color: #fff;
}

details要素にopen属性を指定すると、最初から開いた状態にできます。
また、cssでdetails[open]と指定すれば開いた状態に対して背景色を変えたり文字色を変えたりできます。

transitionが効かない

アコーディオンの開閉速度を調整したい場合、そのままではtransitionが効きません。
details要素にtransitionとheightを指定すると開閉をゆっくりにできます。
しかしアコーディオンで高さ固定にできる場合は少ないと思うので、アニメーションが必要な場合は従来通りtoggleでの実装がおすすめです。

DEMO

Section 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras porttitor metus laoreet lacinia.
Section 2: Aliquam fringilla, sapien eget scelerisque placerat, lorem libero cursus lorem, sed sodales lorem libero eu sapien. Nunc mattis.
Section 3: Morbi vitae viverra dolor. In nunc velit, venenatis sed ligula et, ullamcorper tincidunt lorem. Sed at venenatis lacus, et lacinia nunc.

HTML

<div class="accordion-container">
  <dl class="accordion">
    <dt class="accordion-title">Section 1</dt>
    <dd class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras porttitor metus laoreet lacinia.</p>
    </dd>
    <dt class="accordion-title">Section 2</dt>
    <dd class="accordion-content">
      <p>Aliquam fringilla, sapien eget scelerisque placerat, lorem libero cursus lorem, sed sodales lorem libero eu sapien. Nunc mattis.</p>
    </dd>
    <dt class="accordion-title">Section 3</dt>
    <dd class="accordion-content">
      <p>Morbi vitae viverra dolor. In nunc velit, venenatis sed ligula et, ullamcorper tincidunt lorem. Sed at venenatis lacus, et lacinia nunc.</p>
    </dd>
  </dl>
</div>

jQuery

$(function () {
  $('.accordion .accordion-content').hide();
  $('.accordion .accordion-title ').on('click', function () {
    $(this).next('.accordion-content').slideToggle();
  });
});