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

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

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

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

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

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

no image

テキストに装飾効果を付けるプラグイン

Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

no image

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

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

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

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

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

Comment

Message

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

*

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

    PAGE TOP ↑