タブを画面サイズによってアコーディオンにしてくれる「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

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

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

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

Comment

Message

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

*

PAGE TOP ↑