【JavaScript】「もっと見る」ボタンの実装方法（アコーディオン）

2023年3月29日

クリックすることで、ニュース記事やブログなどの一覧を表示してくれるボタンの実装方法を紹介します。（アコーディオンUIと呼ばれます。）

情報量が多いために普段は隠しておいて、ユーザーが任意で表示・非表示を切り替えられるようにしたい場合に使えます。

“CSSのみ” で実装する『もっと見るボタン』

簡単なものであれば、実はJavaScriptを使わずCSSだけでも実装ができてしまいます。
以下記事で実装例やコードを公開していますので、本記事と合わせてご覧ください。

【CSS】「もっと見る」ボタンの実装方法

実装例とコード

2パターンの実装例を用意しました。ボタンをクリックして、挙動を確認してみてください。
いずれもHTML / CSS / JavaScriptコードを公開していますので、Web制作等にご利用ください。

クリック→瞬時に表示される

AAAAAA
BBBBBB
CCCCCC
DDDDDD
EEEEEE

クリック→フワッと表示される

AAAAAA
BBBBBB
CCCCCC
DDDDDD
EEEEEE

クリックでボタンのテキストも変更しています。（「もっと見る」⇔「閉じる」）

【コード】クリック→瞬時に表示

<div class="btn-box">
  <button>もっと見る</button>
</div>
<div class="more">
  <ul>
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>CCCCCC</li>
    <li>DDDDDD</li>
    <li>EEEEEE</li>
  </ul>
</div>

.btn-box button {
  width: 200px;
  height: 40px;
  padding: 8px;
  font-size: 16px;
  color: #fff;
  background-color:#0000ff;
  border: none;
  border-radius: 24px;
  user-select: none;
  cursor: pointer;
}

.btn-box button:hover {
  opacity: .6;
}

.more {
  display: none;
}

.more ul {
  margin: 16px;
  padding: 0;
  list-style: none;
}

.more.appear {
  display: block;
}

const btn = document.querySelector('.btn-box button');
btn.addEventListener('click', () => {
    const more = document.querySelector('.more');
    more.classList.toggle('appear');

    if (btn.textContent == "もっと見る") {
      btn.textContent = "閉じる";
    } else {
      btn.textContent = "もっと見る";
    }
  });

【コード】クリック→フワッと表示される

<div class="btn-box">
  <button>もっと見る</button>
</div>
<div class="more">
  <ul>
    <li>AAAAAA</li>
    <li>BBBBBB</li>
    <li>CCCCCC</li>
    <li>DDDDDD</li>
    <li>EEEEEE</li>
  </ul>
</div>

.btn-box button {
  width: 200px;
  height: 40px;
  padding: 8px;
  font-size: 16px;
  color: #fff;
  background-color:#0000ff;
  border: none;
  border-radius: 24px;
  user-select: none;
  cursor: pointer;
}

.btn-box button:hover {
  opacity: .6;
}

.more {
  display: none;
}

.more ul {
  margin: 16px;
  padding: 0;
  list-style: none;
}

.more.appear {
  display: block;
  animation: .5s fadeIn;
}

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

const btn = document.querySelector('.btn-box button');
btn.addEventListener('click', () => {
    const more = document.querySelector('.more');
    more.classList.toggle('appear');

    if (btn.textContent == "もっと見る") {
      btn.textContent = "閉じる";
    } else {
      btn.textContent = "もっと見る";
    }
  });

実装例2つ目のような、フワッとした表現（アニメーション）を実装するには、CSSプロパティの「@keyframes」を使います。
「@keyframes」は以下のように記述して、特定の要素に多様なアニメーションがつけられます。

div {
  animation: 1s xxx;  /* xxxは以下で設定した名前を記述 */
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
  }
  x% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK */
  }
  100% {
    /* 変化後の状態 */
  }
}

上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。

【JavaScript&CSS】クリック（タップ）で画像を拡大させる

【CSS】文字や画像をホバーしたときにズームイン＆暗くする

【CSS】画面奥から文字や画像を拡大 / 回転させる（3Dアニメーション）

まとめ

特定の要素の表示・非表示をボタンクリックで切り替えられる、アコーディオンの実装について紹介しました。

ズラッと並んだニュースやブログ、商品リストなど、消したくはないけど常時表示させておくには鬱陶しく感じる場合に加え、Q＆Aや用語集を作成する場合などによく使われます。

実装してみると割とシンプルで簡単なコードなので、ぜひ試してみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！