JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

テーブル

グラフ

背景

ニュースティッカー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.querySelectorAll()でマルチレベルのアコーディオン

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

.querySelectorAll()

JavaScriptの.querySelectorAll()でマルチレベルのアコーディオン

JavaScriptの.querySelectorAll()でマルチレベルのアコーディオン

マルチレベルのアコーディオンとは、例えば「アコーディオンxアコーディオン」のように、各レベルをクリックすると、徐々にそれぞれの新しいレベルが表示されるアコーディオンです。

そんなマルチレベルのアコーディオンを、ネイティブなJavaScriptで作ってみました。

.querySelectorAll()

.querySelectorAll()は、指定したセレクタの条件と一致したHTML要素を全て配列で返します。そして、一致するものがない場合は、空のNodeListを返します。

.querySelectorAll(CSSのセレクタ);

書き方は上記のようにして、引数にCSSのセレクタをして使用します。

複数のセレクタを指定して「AND」で絞り込む

複数のセレクタを指定して「AND」で絞り込む場合は、セレクタ内の記述に半角空白で記述すればOKです。

以下は、pタグと「title」のclass名がついた要素を指定した場合です。

document.querySelectorAll("p .title");

複数のセレクタを指定して「OR」で絞り込む

複数のセレクタを「OR」で絞り込む場合は、カンマで区切ればOKです。

document.querySelectorAll(".title1,.title2");

上記は、「title1」と「title2」のclassでどちらかが一致した場合の記述です。

かかかず
かかかず

このように複数指定できるのも.querySelectorAll の便利な特徴です。

.querySelectorAll()を使ったマルチレベルアコーディオンのサンプル

青字のテキストはリンクで、黒字のテキストはアコーディオン開閉のタイトルです。

マルチレベルアコーディオンのコード

HTMLは、cateTitle のclass名がついているdivタグがアコーディオンタイトルになっています。

そして、このdivタグをクリックすると、同じ階層にある ul タグ以下のオブジェクトが表示される仕組みです。

<div class="javaSample">
  <ul class="catBlock">
    <li><a href="#">親アコーディオン1</a></li>
    <li>
      <div class="cateTitle">
        <p>親アコーディオン2</p>
      </div>
      <ul class="childCat">
        <li><a href="#">子リンク2-1</a></li>
        <li><a href="#">子リンク2-2</a></li>
      </ul>
    </li>
    <li>
      <div class="cateTitle">
        <p>親アコーディオン3</p>
      </div>
      <ul class="childCat">
        <li><a href="#">子リンク3-1</a></li>
        <li><a href="#">子リンク3-2</a></li>
        <li>
          <div class="cateTitle">
            <p>子アコーディオン3-1</p>
          </div>
          <ul class="grandChildCat">
            <li><a href="#">孫リンク3-1</a></li>
            <li><a href="#">孫リンク3-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>
かかかず
かかかず

CSSのアコーディオンだと、HTMLがごちゃつきやすいですが、JSならHTMLは簡単な記述ですみます。

JavaScriptは、.querySelectorAll() で指定した「cateTitle」がクリックされると、.nextElementSibling で同じ親要素を持って隣接する次の要素の display プロパティの「none」を「block」で表示を切り替える仕組みです。

var acc = document.querySelectorAll(".cateTitle");
var i;
for ( i = 0; i < acc.length; i++ ){
    acc[i].onclick = function() {
    this.classList.toggle('active');
    var panel = this.nextElementSibling;
    if ( panel.style.display ){
      panel.style.display = null;
    } else {
      panel.style.display = "block";
      panel.style.opacity = 1;
    }
  }
}

CSS

JavaScriptで表示・非表示を切り替えるので、CSSはシンプルです。

格納されているアコーディオンの子と孫は、最初非表示の状態にする為display: none; で非表示にしています。

div.cateTitle, ul.childCat li {
    display: block;
    line-height: 1.6;
    border: none;
    cursor: pointer;
    transition: 0.5s ease-in;
    position: relative;
    margin: 0;
    padding: 5px 40px 5px 15px;
}
div.cateTitle.active {
    margin-bottom: 0;
}
ul.childCat, ul.grandChildCat {
  display: none;
  overflow:hidden;
  opacity: 0;
  animation: show 0.6s linear 0s;
}
div.cateTitle:after {
    color: #2165c0;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1em;
    content: "\f055";
}
div.cateTitle.active:after {
    content: "\f056";
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

特に、display: none; のアコーディオンに格納している要素をクリックで表示させる場合、CSSのtransition で徐々に表示させようと思うとうまくいきません。

その為、@keyframes でアニメーションを指定して表示させています。

かかかず
かかかず

アコーディオンを展開する「+」アイコンは、FontAwesomeを使っているのでご注意ください。

UI

  • 他のウィンドウが開くことができないポップアップのUIです。

    モーダル

    モーダル

  • 並列な関係を持つ情報を1つずつ格納するUIです。

    タブ

    タブ

  • サイドから全体を覆うほど大きいメニュー表示するUIです。

    ドロワー

    ドロワー

  • 画像などのコンテンツをスライド表示させるUIです。

    スライダー

    スライダー

  • スクロールで表示が変化するスニペットです。

    スクロール

    スクロール

  • クリックすると隠れていた部分が開閉するUIです。

    アコーディオン

    アコーディオン

  • ページのhタグを取得して目次を生成するスニペットです。

    目次

    目次

  • ページの読み込み時にアニメーションをするスニペットです。

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

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

  • マウスオーバーした際に表示される補足説明です。

    ツールチップ

    ツールチップ

  • ページ内上部にあるナビゲーションUIです。

    ヘッダー

    ヘッダー

  • 行と列の組み合わせでできているUIです。

    テーブル

    テーブル

  • データを表やグラフで可視化して見せるUIです。

    グラフ

    グラフ

  • 背景をアニメーションで動かすスニペットです。

    背景

    背景

  • 短いテキスト情報をスクロール表示するUIです。

    ニュースティッカー

    ニュースティッカー

フォーム

  • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

    フォーム

    フォーム

文字

  • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

    文字の装飾

    文字の装飾

  • 文字列の操作をして、置換・変更を行うスニペットです。

    文字の操作

    文字の操作

  • 文字列をカウントして表示などを行うスニペットです。

    文字のカウント

    文字のカウント

  • 数字の要素を取得して、変更するスニペットです。

    数字の操作

    数字の操作

ウィンドウ

classの操作

  • 要素を取得して、classを追加・削除するスニペットです。

    classの操作

    classの操作

要素の操作

API

  • WordPressのAPIを取得して表示するスニペットです。

    WP REST API

    WP REST API

  • Google Books APIsで書籍の情報を表示するスニペットです。

    Google Books APIs

    Google Books APIs

  • 楽天市場のAPIを取得して表示するスニペットです。

    楽天市場API

    楽天市場API

  • openBDのAPIを取得して表示するスニペットです。

    openBD

    openBD

画像・動画

  • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

    画像の操作

    画像の操作

  • YouTubeの動画を表示するスニペットです。

    YouTube

    YouTube

リンク

  • ページ内のリンクを取得して変更・操作するスニペットです。

    リンク

    リンク

  • Google Analyticsとの連携をするスニペットです。

    Google Analytics

    Google Analytics

cookie

  • ブラウザのcookieを利用するスニペットです。

    cookie

    cookie

検索

  • 指定した要素の中から検索を行うスニペットです。

    検索

    検索