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

【トップ画像】アコーディオンUIの実装方法

クリックすることで、ニュース記事やブログなどの一覧を表示してくれるボタンの実装方法を紹介します。(アコーディオンUIと呼ばれます。)
情報量が多いために普段は隠しておいて、ユーザーが任意で表示・非表示を切り替えられるようにしたい場合に使えます。

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

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;
}

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

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

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

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

まとめ

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

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次