JavaScriptの.classList.toggle()でよくある質問のアコーディオン

2022年1月3日2022年3月24日 5分

よくある質問は、Google検索でも回答の一覧がリッチリザルトとして表示されたりするので、重要なコンテンツです。

2020年8月16日よくある質問ページに使えそうなjQueryのアコーディオンUI

かかかず

上記のjQueryアコーディオンと同じものをJavaScriptで作ってみました。

この記事は、.classList.toggle()を使ったネイティブJavaScriptで作った「よくある質問のアコーディオン」です。

.classList.toggle()
よくある質問アコーディオンのサンプル
よくある質問アコーディオンのコード
- CSS

.classList.toggle()

.classList.toggle() はタグが持つclassをON・OFFで切り替える個人的にもよく使うメソッドです。

element.classList.toggle('class名')

element（クラス名をチェックする対象）にclass名があればそのclass名を削除して、逆にない場合はclass名を追加します。

よくある質問アコーディオンのサンプル

アコーディオンのサンプルですが、Question(質問)に該当するヘッダー部分をクリックすることで、Answer(回答)部分が開いて表示されます。

Question one

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

Question two

Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューター

Question three

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

Question four

ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキス

クリックで開くと、右端の「＋」が「ー」に切り替わって表示されるアコーディオンです。

よくある質問アコーディオンのコード

HTMLは、「acco」の要素の中にQuestionにあたる「accordion」。そして、Answerにあたる「panel」を並列に設置して、使っているclass名は3つ程度です。

<div class="acco">
  <div class="accordion">Question one </div>
  <div class="panel">
  <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
  </div>
  <div class="accordion">Question two </div>
  <div class="panel">
    <p>Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューターの世界が広がります。1234567890Windowsでコンピューター</p>
  </div>
  <div class="accordion">Question three </div>
  <div class="panel">
    <p>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 </p>
  </div>
  <div class="accordion">Question four </div>
  <div class="panel">
    <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキス</p>
  </div>
</div>

かかかず

class名がそんなに多くないので、項目追加もしやすいと思います。

JavaScriptは、.onclickのイベントハンドラで「active」class名を、.classList.toggle('active') ので追加・削除をトグルで動かしています。

var acc = document.getElementsByClassName('accordion');
var i;
for ( i = 0; i < acc.length; i++ ){
    acc[i].onclick = function() {
    this.classList.toggle('active');
    var panel = this.nextElementSibling;
    if ( panel.style.maxHeight ){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  }
}

そして、トグルで「active」が付与された次の要素（＝panel のclass名）を指定するnextElementSibling を絡めて、style.maxHeight で要素の高さを設定して表示させます。

CSS

よくある質問のアコーディオンは、以下のCSSを全てコピペすればOKです。

div.accordion {
    display: block;
    line-height: 50px;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.5s ease-in;
    position: relative;
    padding-left: 60px;
    height: 53px;
    margin: 0;
    border-radius: 5px;
    background: #FFF;
    margin-bottom: 15px;
    font-weight: 600;
}
.accordion:before {
    content: "Q";
    position: absolute;
    left: 15px;
    top: 50%;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 21px;
    background: #313131;
    color: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
}
.accordion.active {
    margin-bottom: 0;
}
div.panel{
  max-height:0;
  overflow:hidden;
  transition: 0.3s ease-out;
}
.panel p {
    padding: 10px 20px;
    background: #fafafa;
    margin: 0 0 15px;
    position:relative;
    padding-left: 60px;
}
.panel p:before {
    content: "A";
    position: absolute;
    left: 15px;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    text-align: center;
    font-size: 21px;
    background: #e80000;
    color: #fff;
    border-radius: 50%;
}
.acco{
  position:relative;
}
div.accordion:hover{
  background-color: #ddd;
}
div.accordion:after {
    content: '\02795';
    font-size: 1rem;
    color: #777;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-46%);
}
div.accordion.active:after {
    content: "\2796";
}

よくある、display:none; block の切り替えではないアコーディオンなので、CSSの記述量は少なめです。