0

マルチデバイスに対応してタブからアコーディオン表示に切り替える「Easy Responsive Tabs to Accordion」

マルチデバイスに対応してタブからアコーディオン表示に切り替える「Easy Responsive Tabs to Accordion」

 

PC・タブレット・スマートフォンなど、マルチデバイスに最適化する軽量なjQueryプラグイン「Easy responsive tabs」をご紹介します。スクリーンサイズが小さくなる際に、タブ表示からアコーディオン表示へ切り替えることの出来るjQueryプラグインです。シンプルで汎用性が高いので使いやすくなっています。

 

【使い方】

1.jQuery本体と必要なデータを読み込む

 

以下の3つを読み込みます。

  • jQuery本体
  • easyResponsiveTabs.js
  • responsive-tabs.css

 

 2.HTMLを記述

エリア全体を「#demoTab」で囲み、リストナビにあたる部分を<ul class=”resp-tabs-list”>で囲われた<li>タグで並べます。タブをクリックした際に表示される文章内容を<div class=”resp-tabs-container”>で囲ったそれぞれの<div>要素内に記載。

 3.JavaScriptを記述

()内に適用したい対象となる要素を指定し、.easyResponsiveTabs();で実行。

 4.サンプルを確認

● 横並びタブからアコーディオン表示へ

● 縦並びタブからアコーディオン表示へ

default_m

▼ウィンドウサイズが768px以下になった場合

default_s

 ※メディアクエリーのブレイクポイントが768pxに設定されています。

 

デモサンプル(デフォルト)

 

デモサンプル(カスタム)

 

カスタムサンプルは、横幅とカラーをCSS(easy-responsive-tabs.css)で変更しています。

4-1.HTMLを記述

 4-2.JavaScript

 オプション設定や、cssを調整することでデザイン等も変更できますので色々といじってみるのもいいかもしれませんね。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > マルチデバイスに対応してタブからアコーディオン表示に切り替える「Easy Responsive Tabs to Accordion」