タブを画面サイズによってアコーディオンにしてくれる「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:合わせない
他プラグイン
jQuery Responsive Tabs

WordPressプラグイン
WP Easy Responsive Tabs to Accordion

  • このエントリーをはてなブックマークに追加

関連記事

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」

「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン

親要素の大きさに合わせてテキストをリサイズ「FitText」

「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

no image

エフェクト豊富なニュースティッカー用プラグイン「inewsticker」

「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)

Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

Comment

@goutetsuguma にコメントする コメントをキャンセル

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

*

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

PAGE TOP ↑