【jQuery】アコーディオン簡単実装サンプルB（コピペOK）

  jQuery プログラミング

今回のアコーディオン汎用パーツは、前回よりもコードを簡略化（短く効率がいい様に）させて実装しています。

読者の悩み

  • 簡単で色々なUI作成に応用できる便利なサンプルないかな
  • アコーディオンで隠れたコンテンツはSEO的に問題あるのかわからない…

こういった疑問に答えます。

本記事の内容

  • アコーディオン簡略化汎用パーツの実装方法をコードで解説
  • 展開式コンテンツ（アコーディオン）は隠しコンテンツになるのか？

この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。

web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。

こういった僕が、分かりやすく解説していきます。

デモページを用意

デモページを用意してますので実際に動きが確認できます。

DEMO

また、GitHubにも実際のソースコードをアップしているのでクローンできます。

phpファイル
scssファイル
jsファイル

サンプルコードを用意

サンプルコードで実際のコード［HTML / SCSS / jQuery］を確認できてコピペできます。

サンプルコードはSCSSですがCSSを見たい場合は、GitHubにコンパイルされてないCSSファイルがありますのでご覧ください。

デモページとソースコードを確認しながらご覧ください。

ではコードを見ていきます。

目次

アコーディオン簡略化汎用パーツの実装方法をコードで解説

骨組みは以下の３つです。

  • thisの構文
  • toggleClassメソッド
  • slideToggleメソッド

thisの構文

$(this)はイベントの中でそのイベントが起こった要素を取得することができます。

$()の中でthisをクォーテーション（''）で囲まないことに注意してください。

$(this)は非常に重要な概念なので覚えておきましょう。

$('.jc-accTrigger').on('click', function () {
  $(this).toggleClass('js-active').next('.jc-accContent').slideToggle(400);
   ︙
});

thisの使い方

thisはイメージしにくいので実際のコードで具体例を見てみましょう。

下記のように複数のCSSクラスjc-accTriggerにclickイベントが設定されていた場合、クリックされた時に実際にクリックされたCSSクラスjc-accTriggerにだけ処理を行いたい場合があります。

<div class="c-accordion_Trigger jc-accTrigger">
  <div class="c-accordion_Trigger__title">アコーディオンの準備(1)</div>
       ︙
</div>
   ︙
<div class="c-accordion_Trigger jc-accTrigger">
  <div class="c-accordion_Trigger__title">アコーディオンの準備(2)</div>
       ︙
</div>
   ︙
<div class="c-accordion_Trigger jc-accTrigger">
  <div class="c-accordion_Trigger__title">アコーディオンの完成</div>
       ︙
</div>

このようなときはthisを用いて実際にイベントが起こったクラスを取得しましょう。

toggleClassメソッド

toggleClassメソッドは指定したクラス名のCSSがある場合は削除を行い、なければ追加するというメソッドです。

toggle（トグル）は「 同一の操作で二つの状態を交互に切り換えること 」を意味しているので、toggleClassメソッドはクラスの追加とクラスの削除を切り替える仕組みを持つメソッドというイメージです。

$('.jc-accTrigger').on('click', function () {
  $(this).toggleClass('js-active').next('.jc-accContent').slideToggle(400);
  $(this).next('.jc-accContent').toggleClass('js-active');
  $(this).children('.jc-accTrigger_icon').toggleClass('js-active');
});

nextメソッド

jQueryオブジェクトで指定した要素の兄弟要素（同じ階層の要素）で「次の要素だけ」を選択します。

引数のセレクタを設定することで選択する要素を絞ることができます。

$(this).toggleClass('js-active').next('.jc-accContent').slideToggle(400);
$(this).next('.jc-accContent').toggleClass('js-active');

slideToggleメソッド

jQueryオブジェクトで指定した要素が表示されている時は（slideUpの演出で）隠し、隠れている時は（slideDownの演出で）表示します。

第1引数に期間を「ミリ秒」で設定することで、演出の速度を変更できます（期間を1000と設定すれば、1秒かけて要素を消します）。期間を設定しないと400ミリ秒で演出します。また、第2引数にfunctionを設定すると演出が完了した後に実行されます。

$(this).toggleClass('js-active').next('.jc-accContent').slideToggle(400);

1つの処理で「表示/隠す」処理ができるため、初心者にとって非常に便利なメソッドとなっています。

展開式コンテンツ（アコーディオン）は隠しコンテンツになるのか？

モバイルページでは比較的サイズの小さい画面で情報を効果的に見せる為に、UI/UXの一つとして展開式コンテンツ（アコーディオン）がよく使われます。

展開式コンテンツ（アコーディオン）は隠しコンテンツになるのか？という点について言えば、2019年7月以降、モバイルファーストインデックス (MFI) がデフォルトで適用され評価されるので、初期状態で隠れたコンテンツでも問題はないとGoogleからアナウンスされました。

なので現在は展開式コンテンツ（アコーディオン）でも評価が下がることがないので問題はないと思います。

実装方法について

Googleは特定の実装方法に対する言及はしていませんので、実装方法に関しては問題ないと思いますが、非同期で後からコンテンツを読み込む方法だとさすがのクローラーもスムーズに認識できないのではないかと思われます。

コンテンツが隠れているとクローラーに正しく認識されずインデックスされない（評価されない）のではないかと心配ならば、非同期の方法は避けた方がいいかもしれません。

初期状態では読み込まず、展開時にAjaxで非同期でコンテンツを読み込む方法ではなく、隠したいコンテンツ部分をCSSでdisplay:noneとする方法（jQueryのslideToggleやslideUp/slideDownやhide()）が良いと思います。

今回は以上になります。

作成方法が不安な方は是非参考にしていただけると嬉しいです。

一覧へ

Recommended