The current article
ブラウザ幅（ブレイクポイント）でタブメニューからアコーディオンメニューに切り替えるjQuery
スマートフォン等で閲覧した時、タブメニューからアコーディオンメニューへ、レスポンシブに変わってくれると使いやすくなりますよね。
シンプルなコードで動作しますので、備忘録を兼ねてご紹介します。
capture
参照サイト：Easy Responsive Tabs to Accordion
ダウンロード：Download
デモページ DEMO
ダウンロード
上記ダウンロードから「Easy Responsive Tabs to Accordion」フォルダをダウンロードします。
（GitHubに登録されていない方は、右下の「Download ZIP」からどうぞ）
解凍すると色々入っていますが、
・JSフォルダ内 easyResponsiveTabs.js
・CSSフォルダ内 easy-responsive-tabs.css
の2つで動くと思います。
設置
head内に、CSSとjQuery本体を読み込ませ、スクリプトを記述します。
<link rel="stylesheet" type="text/css" href="style/easy-responsive-tabs.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
});
</script>
簡単な説明ですが、
1行目、スタイルシートを読み込み、
2行目、jQuery本体を読み込み、
3行目、スクリプト本体を読み込み
となります。
4行目以下で、セレクタ名の指定と、オプションを指定します。
6行目で、梱包するセレクタを指定（今回は「#horizontalTab」）
7行目、「default」は横並びのタブ、「vertical」は縦並びのタブ、「accordion」は常にアコーディオン、
8行目、横幅を指定、px幅に変更も可、
9行目、親要素に合わせるかどうか、
10行目、アコーディオン表示時、閉まった状態
となります。
HTML
HTML内に以下を記述します。
<div id="horizontalTab">
<ul class="resp-tabs-list">
<li>情報その1</li>
<li>情報その2</li>
<li>情報その3</li>
<li>情報その4</li>
</ul>
<div class="resp-tabs-container">
<div>
<p>情報その1の内容</p>
</div>
<div>
<p>情報その2の内容</p>
</div>
<div>
<p>情報その3の内容</p>
</div>
<div>
<p>情報その4の内容</p>
</div>
</div>
</div>
1行目のセレクタ名をスクリプトと合わせてください。
後はリストに、タブ用のタイトルを入れて、「div」毎に内容を記述してください。
CSS
ちなみにDEMOページは、別シートでスタイルをあてていますが、以下の様な感じです。参考まで。
/* tab to accordion
===========================================================*/
h3 { color:#F15A24;}
.demo { width: 980px; margin: 0px auto 30px;}
.demo ul { margin-bottom:16px;}
.demo li { list-style:square inside;}
.note { position:relative; color:#333; overflow:hidden;}
.note:after {
content:"";
position:absolute;
bottom:0;
right:0;
border-width:30px 30px 0 0 ; /* This trick side-steps a webkit bug */
border-style:solid;
border-color:#39b5a4 #F5F5F5 #F5F5F5 #39b5a4; /* A bit more verbose to work with .rounded too */
background:#39b5a4; /* For Opera when also applying a border-radius */
display:block; width:0; /* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 768px) {
.demo { margin: 5%; width: 90%;}
.note { background: #39b5a4;padding-bottom:30px;}
}
ブレイクポイントは768pxとなっています。
変更したい場合は、「easy-responsive-tabs.css」内の、167行目付近にある「@media only screen and (max-width: 768px)」を適宜変更してみてください。
（DEMOページの場合は、上記24行目も変更が必要です！）
以上、「ブラウザ幅（ブレイクポイント）でタブメニューからアコーディオンメニューに切り替えるjQuery」のご紹介でした。
関連記事
