jQuery

【jQuery】レスポンシブタブを作成するResponsive Tabs

June 19, 2017
responsive tabs

Responsive Tabsはレスポンシブタブを作成するためのjQueryスクリプト。指定された画面幅(メディアクエリによって定義)より上の画面はタブ、その幅より下の画面ではアコーディオンのように動作します。

How to use

jQuery(1.5.1以上)

<div class="responsive-tabs">
    <h2>[...]</h2>
    <div>[...]</div>
    <h2>[...]</h2>
    <div>[...]</div>
</div>

最初のタブ以外のタブをデフォルトで開きたい場合は、パネルに ‘responsive-tabs__panel – active’というクラスを追加

<div class="responsive-tabs">
        <h2>[...]</h2>
        <div>[...]</div>
        <h2>[...]</h2>
        <div class="responsive-tabs__panel--active">[...]</div>
</div>

MIT