アコーディオン（もっと見るボタン）実装解説｜JavaScript Accordion CSS Guide

2026年4月6日

アコーディオンデザイン見本

ボタンクリックで要素の表示・非表示を切り替えるアコーディオンの実装解説。瞬時切り替えとフェードアニメーションの2パターンのコピペ用コードを掲載。

① 基本の開閉 — display プロパティで瞬時に切り替え

HTML

<div class="accordion">
  <button class="acc-header" id="acc-header">
    <span>もっと見る</span>
    <span class="acc-arrow">▼</span>
  </button>
  <div class="acc-body" id="acc-body">
    <ul>
      <li>AAAAAA</li>
      <li>BBBBBB</li>
      <li>CCCCCC</li>
      <li>DDDDDD</li>
      <li>EEEEEE</li>
    </ul>
  </div>
</div>

CSS

.accordion {
  border: 1px solid #d1d5db;
}

.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: none;
  font-size: 15px;
  cursor: pointer;
  box-sizing: border-box;
}

.acc-header:hover {
  background: #f9fafb;
}

.acc-arrow {
  font-size: 12px;
  transition: transform 0.2s;
  display: inline-block;
}

.acc-header.open .acc-arrow {
  transform: rotate(180deg);
}

.acc-body {
  display: none;
  border-top: 1px solid #d1d5db;
  padding: 12px 16px;
}

.acc-body.appear {
  display: block;
}

.acc-body ul {
  margin: 0;
  padding: 0 0 0 20px;
}

.acc-body li {
  padding: 4px 0;
  font-size: 14px;
}

var accHeader = document.getElementById('acc-header');
var accBody = document.getElementById('acc-body');

accHeader.addEventListener('click', function() {
  accBody.classList.toggle('appear');
  accHeader.classList.toggle('open');
});

classList.toggle() + display: none

CSS で .acc-body に display: none を指定しておき、.appear クラスが付いた時だけ display: block にします。ヘッダーに .open クラスを同時にトグルすることで、矢印アイコンを CSS の transform: rotate(180deg) で反転させ、開閉状態を視覚的に伝えます。

② フェードイン — @keyframes で滑らかに表示

HTML

<div class="accordion">
  <button class="acc-header" id="acc-header">
    <span>もっと見る</span>
    <span class="acc-arrow">▼</span>
  </button>
  <div class="acc-body" id="acc-body">
    <ul>
      <li>AAAAAA</li>
      <li>BBBBBB</li>
      <li>CCCCCC</li>
      <li>DDDDDD</li>
      <li>EEEEEE</li>
    </ul>
  </div>
</div>

CSS

.accordion {
  border: 1px solid #d1d5db;
}

.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: none;
  font-size: 15px;
  cursor: pointer;
  box-sizing: border-box;
}

.acc-header:hover {
  background: #f9fafb;
}

.acc-arrow {
  font-size: 12px;
  transition: transform 0.2s;
  display: inline-block;
}

.acc-header.open .acc-arrow {
  transform: rotate(180deg);
}

.acc-body {
  display: none;
  border-top: 1px solid #d1d5db;
  padding: 12px 16px;
}

.acc-body.appear {
  display: block;
  animation: 0.5s fadeIn;
}

.acc-body ul {
  margin: 0;
  padding: 0 0 0 20px;
}

.acc-body li {
  padding: 4px 0;
  font-size: 14px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

var accHeader = document.getElementById('acc-header');
var accBody = document.getElementById('acc-body');

accHeader.addEventListener('click', function() {
  accBody.classList.toggle('appear');
  accHeader.classList.toggle('open');
});

@keyframes によるフェードアニメーション

@keyframes に名前（例: fadeIn）を付けて変化の内容を定義し、.appear クラスが付いた際の display: block と同時に animation を適用します。0% が変化前、100% が変化後の状態です。表示時だけふわっと現れる演出が実現でき、非表示時にはアニメーションは再生されません。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

アコーディオン（もっと見るボタン）実装解説｜JavaScript Accordion CSS Guide

アコーディオン デザイン見本

① 基本の開閉 — display プロパティで瞬時に切り替え

② フェードイン — @keyframes で滑らかに表示

アコーディオンデザイン見本