JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

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

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

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

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

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

アコーディオンのイラスト よくある質問ページに使えそうなjQueryのアコーディオンUI
かかかず
かかかず

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

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

.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の記述量は少なめです。