タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。
デフォルトでは、768pxがブレイクポイントとなっており、それ以下になるとアコーディオンに変換してくれます。ダウンロード デモ

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<link href="easy-responsive-tabs.css" type="text/css" rel="stylesheet">
<script src="easyResponsiveTabs.js" type="text/javascript"></script>

実装(HTML)

<div id="htab">
    <ul class="resp-tabs-list">
        <li>"タブ1"</li>
        <li>"タブ2"</li>
        <li>"タブ3"</li>
    </ul> 
    <div class="resp-tabs-container">
        <div>"コンテンツ1"</div>
        <div>"コンテンツ2"</div>
        <div>"コンテンツ3"</div>
    </div>
</div>

実装(オプション設定)

// 768px以上 横タブ 768px以下アコーディオン
<script type="text/javascript">
$('#htab').easyResponsiveTabs();
</script>

// 768px以上 縦タブ  768px以下アコーディオン
<script type="text/javascript">
$('#vtab').easyResponsiveTabs({
    type: 'vertical',
});
</script>

// 常にアコーディオン
<script type="text/javascript">
$('#acc').easyResponsiveTabs({
    type: 'accordion',
});
</script>

オプション

• type：表示タイプを指定
  指定無し：横タブ vertical：縦タブ accordion：画面サイズによらず常にアコーディオンを表示
• width：タブとアコーディオンの横幅を指定
  指定無し：auto(親要素に合わせる) '~px'：横幅を指定する
• fit：親要素に合わせる
  true：合わせる false：合わせない

Related

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」 テーマ 「Responsive」 カスタマイズ 表示パターン豊富なスライダー「flexslider 2」 レスポンシブにも対応したカレンダーを表示する「Calendario.js」 ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」 折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」 レスポンシブ対応の画像スライダー・ギャラリー用プラグイン