jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法
レスポンシブWebデザインでのサイト構築において、
PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを
スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに
切り替える動作を見かけることがあります。
それぞれの画面解像度によって最適なUIに切り替える手段になりますが
そんなレスポンシブ対応のタブとアコーディオン切り替えUIを
jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。
jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法
「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示
サンプルではウィンドウサイズが768px以上ならばタブ切り替え、
768px以下だったらアコーディオン動作に切り替わります。
タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり
アコーディオンではボタンクリックで付随するコンテンツ要素がスライドアニメーションで表示され
アクティブ状態のボタンにはCSSクラスにて個別の装飾等の指定が可能になっています。
全体構成についてまずはHTMLから。
[html]
◆HTML
- [１] MENU
-
これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［１］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。
- [２] MENU
-
文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［２］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［２］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［２］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［２］のダミーテキストです。
- [３] MENU
-
これはコンテンツ［３］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［３］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。
これはコンテンツ［３］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。これはコンテンツ［３］のダミーテキストです。文字の大きさ、量、字間、行間等を確認するために入れています。
- [４] MENU
-
これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。
これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。
これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。これは文字の大きさ、量、字間、行間等を確認するために入れているコンテンツ［４］のダミーテキストです。
[/html]
切り替えるボタンと、付随するコンテンツ要素のセットは
全体を＜dl＞で構成します。
その中でボタン要素は＜dt＞、
切り替え表示するコンテンツ要素を＜dd＞、で構成します。
この要素に対してCSSは以下のように指定します。
[css]
◆CSS
/* ——————————
#tabAccordion
—————————— */
#tabAccordion {
margin: 0 auto;
width: 600px;
height: 400px;
font-size: 12px;
border: #999 1px solid;
position: relative;
}
#tabAccordion dl {
top: 0;
left: 0;
width: 600px;
position: absolute;
}
#tabAccordion dl dt {
top: 0;
left: 0;
width: 150px;
font-weight: bold;
position: absolute;
border-right: #999 1px solid;
border-bottom: #999 1px solid;
background: #f0f0f0;
box-sizing: border-box;
}
#tabAccordion dl:nth-child(2) dt {
left: 150px;
}
#tabAccordion dl:nth-child(3) dt {
left: 300px;
}
#tabAccordion dl:nth-child(4) dt {
left: 450px;
border-right: none;
}
#tabAccordion dl dt a {
padding: 15px 0;
font-weight: bold;
display: block;
text-align: center;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#tabAccordion dl dt.btnAcv {
border-bottom: none;
background: #fff;
}
@media only screen and (min-width: 768px) {
#tabAccordion dl dt:hover > a {
background: #fff;
}
}
#tabAccordion dl dd {
top: 50px;
left: 0;
padding: 30px;
width: 100%;
height: 350px;
text-align: left;
overflow-y: auto;
display: none;
position: absolute;
box-sizing: border-box;
}
#tabAccordion dl dd p {
padding-bottom: 2em;
line-height: 2em;
}
/* ——————————
MEDIAQUERIES LAYOUT
—————————— */
@media only screen and (max-width: 800px) {
#tabAccordion {
width: 100%;
box-sizing: border-box;
}
#tabAccordion dl {
width: 100%;
box-sizing: border-box;
}
#tabAccordion dl dt {
width: 25%;
}
#tabAccordion dl:nth-child(2) dt {
left: 25%;
}
#tabAccordion dl:nth-child(3) dt {
left: 50%;
}
#tabAccordion dl:nth-child(4) dt {
left: 75%;
}
}
/* ——————————
MEDIAQUERIES[SP]LAYOUT
—————————— */
@media only screen and (max-width: 768px) {
#tabAccordion {
width: 100%;
height: auto;
border: none;
}
#tabAccordion dl {
top: auto;
left: auto;
width: 100%;
position: relative;
}
#tabAccordion dl dt {
top: auto;
left: auto;
width: 100%;
position: relative;
border-bottom: #999 1px solid;
border-right: none;
}
#tabAccordion dl:first-child dt {
border-top: #999 1px solid;
}
#tabAccordion dl:nth-child(2) dt,
#tabAccordion dl:nth-child(3) dt,
#tabAccordion dl:nth-child(4) dt {
left: auto;
}
#tabAccordion dl dt a {
padding: 20px;
height: auto;
line-height: 1em;
text-align: left;
}
#tabAccordion dl dt a:after {
content: ”;
margin-top: -4px;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
font-size: 1em;
font-weight: bold;
line-height: 1.2em;
display: block;
position: absolute;
border-top: 2px solid #666;
border-right: 2px solid #666;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#tabAccordion dl dt.btnAcv {
border-bottom: #999 1px solid;
background: #bbb;
}
#tabAccordion dl dt.btnAcv a:after {
content: none;
}
#tabAccordion dl dd {
top: auto;
left: auto;
padding: 20px;
width: 100%;
height: auto;
position: relative;
border-bottom: #999 1px solid;
}
}
[/css]
768px以上のPC向け画面の場合では
タブ切り替え用のレイアウトを指定します。
すべての＜dl＞を「position:absolute;」で重ねた状態にして
ボタンクリックでタブ切り替え動作にて表示／非表示を切り替えます。
768px以下のスマートフォン向け画面の場合では
アコーディオン方式のレイアウトを指定します。
すべての＜dl＞は重ねた状態にはせずに
「position: relative;」相対指定に切り替え
＜dl＞要素が縦に並んだ状態にして
ボタンクリックでアコーディオン動作にて表示／非表示を切り替えます。
そして実際の切り替えスクリプトは以下の様になります。
[javascript]
◆SCRIPT
[/javascript]
スクリプト開始部分にある設定値の内容は以下の様になっています。
| rwdTab = $(‘#tabAccordion’) | 切り替えUI全体を囲うブロック要素（CSSクラスでも可） |
|---|---|
| switchPoint = 768 | PC向けとスマートフォン向けで切り替えるウィンドウサイズ |
| fadeSpeed = 500 | タブ動作でコンテンツ要素が切り替わる際のフェードアニメーション時間 |
| slideSpeed = 500 | アコーディオン動作でコンテンツ要素が開閉する際のスライドアニメーション時間 |
これらの設定値を変更することで微調整が可能になっています。
UI動作が切り替わるポイントとなる値は変数「switchPoint」に設定します。
※「switchPoint」で設定する値は、CSSメディアクエリの設定と同じ値にします。
ボタン要素がクリックされた時点で、その時のウィンドウサイズを取得し
「switchPoint」で設定された値（サンプルでは768px）よりも大きければ
タブ動作として「fadeIn()」「fadeOut()」メソッドにて
ボタン要素の次の要素＜dd＞に対して表示／非表示を切り替え、
「switchPoint」で設定された値よりも小さければ
アコーディオン動作として「slideDown()」「slideUp()」メソッドにて
ボタン要素の次の要素＜dd＞に対して表示／非表示を切り替えます。
スクリプト動作に関してはウィンドウサイズの判別によって
表示／非表示の切り替え方法を変える、というシンプルな構成になっています。
タブ動作では「fadeIn()」「fadeOut()」メソッド、
アコーディオン動作では「slideDown()」「slideUp()」メソッドにて
表示／非表示の切り替え動作を実装していますが、
ここを「animate()」メソッド等で、PCレイアウト向けとスマートフォン向けで
それぞれアニメーション設定することで
独自の切り替え動作にて実装させることも可能かと思います。
以上がレスポンシブ対応のタブとアコーディオンを切り替えるUIを
jQueryでシンプルに実装する紹介でした。
ページ全体の高さを抑えるために
限られたスペースに要素をまとめる際などに活用できるUIかと思っています。
タブとアコーディオンを切り替えるUIを実装する際にぜひ。。。
初めまして。
いつも拝見して参考にさせて頂いております。
jQueryの超初心者で現在勉強中です。
こちらのタブからアコーディオンの切り替えを実装させて頂こうと思っているのですが、質問があります。
こちらに表示されているものはアコーディオンになった場合、一番下のコンテンツのみ開きっぱなしになってしまいますが、これを閉じるにはどのようにすれば良いのでしょうか。
色々やってみたのですが、何せ超初心者なので全く動きません。
具体的なスクリプトをご教示、合わせて解説を頂けると勉強になります。
突然厚かましいお願いをして大変恐縮ですが、よろしくお願い致します。
＞増田美咲さん
コメントありがとうございます。
当記事のスクリプトをご検討いただいている様で
うれしく思っております。
ご質問いただきました件についてですが、
レスポンシブで構成していることもあって
アコーディオンですべて閉じる状態を作ってしまうと
その状態でPCレイアウトにした際に
アクティブ状態のタブがなくなってしまうことになるので
構成上ちょっと厳しいかと考えています。
またそのような仕様でなにかいいUIが思いつきましたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
コメントにご返信頂き、ありがとうございます。
ご回答の件、納得致しました。
突然のご質問にも関わらず丁寧にご回答いただき、ありがとうございました。
もし、良いＵＩが思いつきましたら、ぜひこちらで紹介して下さい！！
カスタマイズについて質問がありコメントにて失礼します。
PC表示にて、タブの位置を左側、コンテンツを右側にするときは
どうしたら良いですか？
よろしければ教えてください。
＞hiyoさん
コメントありがとうございます。
当記事のスクリプトをご検討いただいている様で
うれしく思っております。
ご質問いただきました件についてですが、
レイアウトの変更はスクリプト動作に影響なく
CSSの調整のみで可能となっております。
お試しください。
よろしくお願いします。
コメントへのご返信ありがとうございます。
サンプルをダウンロードして、CSS変更を試したのですが、
・アクティブタブが高さを保持できていない（ddタグのコンテンツ分高さが出る）
・2～4でのddタグ内コンテンツが下がっていく
という現象が起きます。
こちらのCSSの設定に問題があるのかと思いますが、
どう対処したら良いのか分かりません。
サンプルURLは以下です。
http://aytestpage.2-d.jp/test2.html
もし可能でしたら教えていただけると助かります。
お忙しいところ申し訳ございませんが
どうぞよろしくお願いいたします。
＞hiyoさん
動作の解説にも書いてあるとおり、
タブ切り替え用のレイアウトは
すべてのdlを「position:absolute;」で
重ねた状態にして制御してあるので
その構成は変えずにCSSを調整していただければと思います。
dtもddも基本的には「position:absolute;」で
位置を調整してありますので、floatは使わずに
「top」と「left」の値を調整するだけで
左右に配置するレイアウトも実現できると思います。
お試しください。
よろしくお願いします。
度々のコメントへのご返信ありがとうございます。
アドバイス頂いたおかげで、レスポンシブ環境を保ったまま
左右振り分けできました。
お忙しいところ教えていただきありがとうございました。
シンプル且つ簡潔なスクリプトでぜひ使わせていただきたいと思うのですが
アコーディオンの際、開いていないdtを押すと、最初から開いているコンテンツが閉じてから、押したdtの下のddが開きますよね。
クリックするdtの上のddが開いていた場合、上のddが閉じる→下のddが開くがほぼ同時に起きるため、クリックしたdtが上にずり上がってしまいます。
この現象を解決するためにはどうしたらよいでしょうか？
＞なかのさん
コメントありがとうございます。
当記事のスクリプトをご検討いただいている様で
うれしく思っております。
ご質問いただきました件についてですが、
レスポンシブで構成していることもあって
タブとアコーディオンでアクティブ状態のエリアを
一つのみ設ける必要があるので
そのような動作になってしまうのは
避けられないかと思っております。
もしくはなにか理想とされている動作があれば
参考になるものなどお知らせいただければ
検討もできるかと思っております。
よろしくお願いします。
お返事ありがとうございます。
> もしくはなにか理想とされている動作があれば
> 参考になるものなどお知らせいただければ
> 検討もできるかと思っております。
上のddが閉じる
→閉じ終わったらクリックしたdtまでアンカー移動（画面の一番上に該当のdtがある状態）
→下のddが開く
という動きは難しいでしょうか？
おいそがしいところ恐れ入りますが、ご検討いただけると嬉しいです。
上のddが閉じる→下のddが開く
→閉じ終わったらクリックしたdtまでアンカー移動（画面の一番上に該当のdtがある状態）
でも結構です。
＞なかのさん
スクリプトの22、23行目がアコーディオンの動作になり、
———————–
・22行目がスライドアニメーションで閉じる
・23行目が該当要素をスライドアニメーションで開ける
———————–
となりますので、
23行目の処理をsetTimeoutなど遅延処理を使って遅らすことで
実装できるのではないかと思います。
・jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法
http://black-flag.net/jquery/20110405-2878.html
お試しください。
よろしくお願いします。
こんにちは、久しぶりにサイトを訪れましたらいろいろとJqueryの種類が増えており驚きました。
今回のタブとアコーディオンの組み合わせは、プラグインなどでよく見かけたりしてとても複雑な構造で手がでませんでしたが、BlackFlag様のサンプルはそれを全く感じさせなく、本当にシンプルで繰り替えが可能だという可能性を見出しておりレスポンシブでJavascriptの動きを変化させるときの注意点などと一緒に記載されておりとても参考になります。
個人的なことですが、いまコーエー・テクモさんのサイトのニュース一覧の部分の月ごとのナビゲーションを再現しようとしていますが、スマホ～タブレット間にカルーセルボタンが出現し、まるで貴サイトの猫ちゃんたちのカルーセルを彷彿させました。
前後の移動ボタンで動かせるのが便利でいいなぁと思いました・・・
(メディアクエリとJqueryとの幅宣言でできるのかなぁ)
長文となりましたが、これからも頑張ってください一ファンとして応援しています。
＞アシベさん
当ブログの記事をいろいろとご覧いただき
ありがとうございます。
そのようなお言葉をいただけると
とてもうれしく思い、励みになります。
やはり最近はモバイルファーストと言われることもあり
レスポンシブなどのスマホに配慮したUIが必要不可欠になりますね。
当ブログでもそのようなスマホでも便利に扱える
UIをこの先もっとたくさん紹介していければと思います。
今後もご贔屓いただけると幸いです。
よろしくお願いします。
はじめまして。
検索でこちらにたどり着いて、まさに求めていたものでした。
ホームページの作成経験があまりない私でも簡単に実装でき、本当に感謝です。ありがとうございました。
うまくいきましたので欲がでてきたのですが、一度タブ表示をしてアクティブになったものを、別ページから戻った場合も記憶させておきたいのです。
「jQuery Cookie」を使って、スクリプトの10行目から11行目のcontentsAreaあたりにCookieの値を入れるのかなと考えて、こちらのサイトさんttp://wataame.sumomo.ne.jp/archives/5828などを参考にいろいろ試したのですがうまくいきません。
お忙しいところ恐縮ですが、アドバイスいただけたら幸いです。
よろしくお願いします。
＞megaさん
コメントありがとうございます。
当記事のスクリプトをご活用いただいている様で
うれしく思っております。
ご質問いただきましたCookieの使用についてですが、
アクティブ状態を保存するには
タブをクリックした際の番号をCookieに記録しておいて
ページをロードした際に、その番号のタブをクリックさせる、
といった構成にすることで可能になるかと思います。
試しにサンプルを用意してみましたので
下記ページからご確認ください。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionCookie/
どれかのタブをアクティブ状態にしたら
ブラウザをリロードしてもずっとそのタブが開かれた状態になっているかと思います。
サンプルデータ一式はこちらからダウンロードできますので
スクリプト部分など参考にしていただければと思います。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionCookie.zip
お試しください。
よろしくお願いします。
お忙しいところ早速の返信ありがとうございます。
しかもアドバイスどころかサンプルまで用意していただいて恐縮です。
htmlもcssもよくわかっていないのに、javascriptなどは余計にチンプンカンプンなのですが、
無理やり「 btnElm」をCookieに利用しようとしていたのでうまくいかなかったのかなと思いました。
サンプルを参考に勉強させていただきます。
ほんとうにほんとうにありがとうございました。
益々のご活躍をお祈りします。
レスポンシブでタブ切替を探していたところこちらにたどり着きました。
とても分かりやすくて助かっています。
ありがとうございます。
1点困っていることがあります。
#tabAccordionの高さをddの持つ高さに可変したいのです。
サンプルでは#tabAccordionに高さ400pxを指定していますが、
これをautoにすると、コンテンツが全て隠れてしまいます。。
400pxを超えるとスクロールバーが出るようにはなっていますが、
出来れば、ddの内容に合わせて高さを可変出来れば大変嬉しいです。
ご返答頂ければ幸いです。よろしくお願い致します。
＞mainitibenkyoさん
コメントありがとうございます。
当記事のスクリプトをご活用いただいている様で
うれしく思っております。
高さを可変にするには、クリックしたタブの対象となるddの高さを取得し
「#tabAccordion」に指定してあげる必要があります。
試しにサンプルを用意してみましたので
下記ページからご確認ください。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionLiquid/
CSS上ではddと「#tabAccordion」に対する高さの指定を入れず
スクリプトから高さの制御をする構成になっています。
サンプルデータ一式はこちらからダウンロードできますので
スクリプト部分など参考にしていただければと思います。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionLiquid.zip
お試しください。
よろしくお願いします。
レスポンシブに対応したタブ切り替えのやり方を
検索していたらたどり着きました。
私の求めていたものだったので、
大変、助かりました。ありがとうございます。
特に、質問者の方ように用意されていたこちらがとても役立ちまちした。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionLiquid/
ここまで無料配布していただいているのに恐縮ですが、
４つあるメニューを増やすにはどうしたらいいでしょうか？
全て５つにしたいと思っております。
いろいろ試したのですが、メニュー１とかぶったり上手く表示されません。
お忙しいところ恐縮ですが、アドバイスいただけたら幸いです。
よろしくお願いします。
＞tkさん
コメントありがとうございます。
当記事のスクリプトをご活用いただいている様で
うれしく思っております。
ボタンの並び等についてはCSSでの調整のみになります。
サンプルのサイズ構成でボタンを5つにするには
「#tabAccordion dl dt」の「width」を「120px」にして
「#tabAccordion dl:nth-child(n) dt」のセレクタを一つ追加し、
それぞれ「left」の位置を120の倍数にすれば実装できると思います。
タブレットサイズ（幅：800px～768px）の場合は
「width」を「20%」を基準にして
同様に調整してみてください。
お試しください。
よろしくお願いします。
レスポンシブのタブを探していたので大変ありがたく使わさせていただいています。
質問なのですが、アクティブタブの背景色をタブごと違う色に設定することは可能でしょうか。
.btnAcv を色々嬲ってみたのですが、どうもうまくいかなかったのでご教授いただけますとありがたいです。
＞たにざわさん
コメントありがとうございます。
当記事のスクリプトをご検討いただいている様で
うれしく思っております。
アクティブタブごとの背景色設定は
特にスクリプトには手を加えることなく
HTML側のタブとなる要素＜dt＞にそれぞれ個別のクラスをつけて
「.btnAcv」と組み合わせることで可能になるかと思います。
【例】
◆HTML
＜dt class=”tab1″＞
＜dt class=”tab2″＞
＜dt class=”tab3″＞
＜dt class=”tab3″＞
◆CSS
.tab1.btnAcv{background:#ff0000;}
.tab2.btnAcv{background:#00ff00;}
.tab3.btnAcv{background:#0000ff;}
.tab4.btnAcv{background:#ffff00;}
お試しください。
よろしくお願いします。
初めまして、moiと申します。
こちらのレスポンシブタブJSを現在利用させていただいておりますが、
こちらのタブの設置についてご質問がございます。
CSSに設定している下記内容についてなのですが、【tabAccordion】に高さを設定しないと【tabAccordion】で内包されている枠の高さを読み込んでもらえません。
高さを読み込ませるためにはどうすればよいでしょうか。
ちなみにHTML構造は下記に記述している通りです。
.tabAccordion {
margin: 0 auto;
width: 600px;
height: 400px;
font-size: 12px;
border: #999 1px solid;
position: relative;
}
↓↓↓↓
※理想
.tabAccordion {
width: 1000px;
height: 100%;
position: relative;
}
▼HTML構造
タブ1
コンテンツ内容
コンテンツ内容02
・・・
＞moiさん
コメントありがとうございます。
当記事のタブアコーディオンスクリプトをご活用いただいているようで
うれしく思っております。
アコーディオンの高さ設定については
ボタンをクリックするごとに高さを取得して
可変アニメーションで切り替えるパターンも用意させていただいております。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionLiquid/
CSS上ではddと「#tabAccordion」に対する高さの指定を入れず
スクリプトから高さの制御をする構成になっています。
サンプルデータ一式はこちらからダウンロードすることもできますので
スクリプト部分など参考にしていただければと思います。
http://black-flag.net/devel/jQueryResponsiveTabAccordion/jQueryResponsiveTabAccordionLiquid.zip
こちらのパターンで問題は解決できますでしょうか。
ご確認ください。
よろしくお願いします。