bootstrapで画面縮小時にTabをCollapse(アコーディオン)に切り替えるjs

bootstrapで画面縮小時にTabをCollapse(アコーディオン)に切り替えるjs



flatlogic/bootstrap-tabcollapse
参考
flatlogic/bootstrap-tabcollapse

Bootstrap Tab Collapse plugin. Switches bootstrap tabs component to collapse for small screens - flatlogic/bootstrap-tabcollapse

flatlogic/bootstrap-tabcollapse GitHub

タブが複数個あると、スマートフォン画面などで表示する際に2段、3段となってレイアウト崩れが発生します。

これを自動でCollapse(読み方がわからない)、所謂アコーディオン効果に切り替えてくれるというjQueryプラグインです。

他にもあったのですが、これは画面を小さく表示した後大きくするとタブが復帰しなくなる症状が出てしまったので☓。

openam/bootstrap-responsive-tabs
参考
openam/bootstrap-responsive-tabs

Bootstrap responsive tabs are tabs that switch to collapsible components (accordions) when resized. - openam/bootstrap-responsive-tabs

openam/bootstrap-responsive-tabs GitHub

今日はここまで
bootstrapで画面縮小時にTabをCollapse(アコーディオン)に切り替えるjs

bootstrapで画面縮小時にTabをCollapse(アコーディオン)に切り替えるjs


開発

See the Pen bootstrap base by kosuke agusa (@aguko) on CodePen. https://github.com/flatlogic/bootstrap-tabcoll…


関連する記事



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

【jQuery】フォームに条件分岐(conditional logic)を設定する
【jQuery】フォームに条件分岐(conditional logic)を設定する

例えばアンケートフォーム等で ここに来た目的は? 観光仕事その他 という設問があって、「その他」を選択すると、その下に新たに その他を選んだ方はこちらに目的をご記入下さい というテキストフォームが追加される、というのを作…

コメントを残す

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

*(必須)

*(必須・表示されません)