PCの時はタブ切り替え・SPの時はアコーディオン開閉になるギミック処理

[ ID : 2378 ]
シルバー
PCの時はタブ切り替え・SPの時はアコーディオン開閉になるギミック処理

概要

【jQuery】PCではタブ切り替えでコンテンツを表示/非表示し、スマートフォン(SP)の時はアコーディオン開閉でコンテンツを表示/非表示するギミック処理について。
※別ページからの特定タブ(アコーディオン)指定のアンカーリンクにも対応

用途

  • PCの時はタブ切り替えでコンテンツを表示制御したい。
  • スマートフォンの時はアコーディオンでコンテンツを表示制御したい。
  • 他ページからのアンカーリンク遷移で指定のタブ(アコーディオン)をカレント状態にしたい。

内容

  • JSのグローバル変数でブレイクポイントを設定し、ブレイクポイントに合わせて処理を変える。
  • PC時のみ、ロード時にアンカーの指定がない場合は一つ目のタブがカレントになる。
    ※SP時はカレントのアコーディオンがない状態になる。

注意事項

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

その他

  • jQuery v3.6.0使用。

実装方法

下記サイトから/dist/jquery.breakpoints.min.jsを取得する。
https://github.com/dawn-inc/jquery.breakpoints.js

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録