レスポンシブでスマホ時はアコーディオンで、タブレットからはタブメニューで使い分けたい

現在、レスポンシブでWebページを作成しており、自分では解決できそうもないので質問をさせていただきます。皆様のお力をお貸しください・・・よろしくお願いいたします。

実現したいことは、質問内容にも書いてありますがスマホ時にはナビゲーションをアコーディオンに、タブレットからはナビゲーションをタブメニューに切り替えて、中身の内容をスマホ時はスライドアップ・ダウンで現在の箇所がわかりやすいようにマークと色で示したいです。タブレット時は上記の、"色"は残しタブメニューを選んだ箇所をフェードインで内容を表示させ、それ以外はメニュー内容はフェードアウトさせたいです。

※Jqueryプラグインで紹介されている。
Easy Responsive Tabs to Accordionを試してみましたが、うまくいかずプラグインなしで実現できないかと・・・

スマホ時

タブレット時

※HTMLの一部を省略しています(文字数がオーバーするので)

html
1<div class="wrapper">
2  <ul class="accordion-nav">
3   <li>
4    <a class="accordion-link">リンク1<span class="plus"></span></a>
5<section id="active" class="Section  l-column tabs">
6  <div class="l-row">
7 <div class="Description_Panel l-halfColumn">
8   <div class="Description__sub">
9   <img class="Description__thumb" src="http://placehold.it/275x250">
10   </div>
11   
12  <div class="Description__main">
13    <h3 class="Description__head">見出し</h3>
14     <div class="Description__body">
15      <p class="Description__txt">
16      テスト
17      </p>
18     </div>
19     
20    <div class="Description__foot">
21        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
22      <p class="Description__foot-txt">
23       テスト
24      </p>
25    </div>
26   </div>
27  </div>
28  
29 <div class="Description_Panel l-halfColumn">
30   <div class="Description__sub">
31      <img class="Description__thumb" src="http://placehold.it/275x250">
32   </div>
33   
34  <div class="Description__main">
35    <h3 class="Description__head">見出し</h3>
36     <div class="Description__body">
37      <p class="Description__txt">
38      テスト
39      </p>
40     </div>
41     
42    <div class="Description__foot">
43        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
44      <p class="Description__foot-txt">
45       テスト
46      </p>
47    </div>
48   </div>
49 </div>
50</div>
51
52  <p id="close" class="mt-10 mb-15 btn-close btn-link">
53        <a href="#" class="close-link">閉じる</a>
54      </p>
55</section>
56</li>
57
58<li>
59 <a class="accordion-link">リンク2<span class="plus"></span></a>
60<section class="Description  l-column tabs">
61  <div class="l-row">
62 <div class="Description-Panel portraot l-tripartitionColumn">
63   <div class="Description__sub">
64      <img class="Description__thumb" src="http://placehold.it/275x250">
65   </div>
66   
67  <div class="Description__main">
68    <h3 class="Description__head">見出し</h3>
69     <div class="Description__body">
70      <p class="Description__txt">
71       テスト
72      </p>
73     </div>
74     
75    <div class="Description__foot">
76        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
77      <p class="Description__foot-txt">
78        テスト
79      </p>
80    </div>
81   </div>
82  </div>
83</div>
84
85<p id="close" class="mt-10 mb-15 btn-close btn-link">
86        <a href="#" class="close-link">閉じる</a>
87      </p>
88</section>
89</li>
90
91<li>
92 <a class="accordion-link">リンク3<span class="plus"></span></a>
93 
94<section class="Section  l-column tabs">
95  <div class="l-row">
96 <div class="Description-Panel portraot l-tripartitionColumn">
97   <div class="Description__sub">
98     <img class="Description__thumb" src="http://placehold.it/275x250">
99   </div>
100   
101  <div class="Description__main">
102    <h3 class="Description__head">見出し</h3>
103     <div class="Description__body">
104      <p class="Description__txt">
105      テスト
106  </p>
107     </div>
108     
109    <div class="Description__foot">
110        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
111      <p class="Description__foot-txt">
112       テスト
113      </p>
114    </div>
115   </div>
116  </div>
117   </div>
118  
119  <p id="close" class="mt-10 mb-15 btn-close  btn-link">
120        <a href="#" class="close-link">閉じる</a>
121      </p>
122</section>
123</li>
124</ul>
125</div>
126<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
127<script type="text/javascript"> 
128 $(function(){
129    
130   var rwdTab = $(".accordion-nav");
131   var switchPoint = 640;
132   var fadeSpeed = 500;
133     
134   var contentArea = rwdTab.children('li').children('a');
135     
136  $('.accordion-nav').children('li').first().children('a').addClass('selected').next().show();
137     
138 $(".accordion-nav > li > a").click(function(){
139     if(!$(this).hasClass('selected')){
140      $('.accordion-nav').removeClass('selected');
141     $(this).addClass('selected');
142         
143    if(window.innerWidth > switchPoint){
144       contentArea.fadeOut(fadeSpeed);
145        $(this).next().fadeIn(fadeSpeed);
146 } else {
147      
148      var click= $("+section",this);
149        
150      click.slideDown("fast");
151    
152      $(".accordion-nav section").not(click).slideUp("fast");
153     
154    $(this).removeClass("selected"); 
155    $(".selected").removeClass("selected");
156    $(this).addClass("selected");
157        
158     return false;
159  }
160 }
161});
162});
163</script>

※文字制限をオーバーするので質問内容のナビゲーション箇所のみとなります。ご了承ください。

css
1
2.accordion-nav{
3  margin: 30px auto;
4  position: relative;
5  max-width: 768px;
6  width: 95%;
7}
8
9@media screen and (min-width: 768px){
10    .accordion-nav{
11       position: relative;
12       width: 95%;
13    }    
14    
15    .accordion-nav li{
16      display: inline;
17    }
18}
19
20.accordion-link{
21  display: block;
22  padding: 10px 12px;
23  position: relative;
24  font-size: 16px;
25  font-size: 1.6rem;
26  font-weight: bold;
27  letter-spacing: 1.5px;
28  background-color: #20c1ea;
29  border-bottom: 1px solid #fff;
30  cursor: pointer;
31  color: #fff;
32}
33
34.accordion-link::after{
35  content:"";
36  display: block;
37  position: absolute;
38  top: 8px;
39  right: 10px;
40  bottom: 0;
41  width: 20px;
42  height: 12px; 
43  background-size: 100% auto;
44  -webkit-transition: 0.3s linear; 
45  -moz-transition:0.3s linear; 
46  -ms-transition:0.3s linear; 
47  transition: 0.3s linear;
48}
49
50@media screen and (min-width: 768px){
51    .accordion-link{
52      display: inline-block;
53    }
54}
55
56.accordion-link:hover{
57  background-color: #5997a7;
58}
59
60/*sectionの本体部分を非表示に*/
61.tabs{
62  display: none;
63}
64
65/*選択時に現在の箇所の色を変える*/
66.selected{
67  background-color: #ffc44d;
68}
69

#試したこと
参考サイトなどを頼りに自分なりに試してみましたが、
スマホ時のアコーディオンは動くまではいきましたが、
肝心のタブレット時のタブメニューで現在選択中の内容に沿って、ナビゲーション部分がカラム落ち？になってしまいクリックすると全体がフェードアウトしてしまいます。

#補足情報(参考したサイト様)

WebPark様 http://weboook.blog22.fc2.com/blog-entry-347.html
black-flag様 http://black-flag.net/jquery/20151215-5858.html
codepen様

行動規範の内容に同意します

回答1件

ベストアンサー

今のHTML構造のままで実現しようと思うとかなり厳しい戦いになると思うので、
私なら作りやすいようにHTML構造を次のような形に変更しちゃいます。
（簡易化してありますので要素やclassはお好きに…）

HTML
1<!-- タブメニュー（640px以下では表示しない） -->
2<ul class="tab only-tab">
3  <li data-tab="#link1">リンク1</li>
4  <li data-tab="#link2">リンク2</li>
5  <li data-tab="#link3">リンク3</li>
6</ul>
7<!-- タブbody-->
8<div id="link1">
9  <div class="acr-title only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
10  <div class="acr-body">
11    //ここにコンテンツを入れる
12  </div>
13</div>
14<!-- タブbody-->
15<div id="link2">
16  <div class="acr-title only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
17  <div class="acr-body">
18    //ここにコンテンツを入れる
19  </div>
20</div>
21<!-- タブbody-->
22<div id="link3">
23  <div class="acr-title only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
24  <div class="acr-body">
25    //ここにコンテンツを入れる
26  </div>
27</div>

CSSでは640pxを境にタブ型とアコーディオン型のデフォルト表示を定義します。
また、開閉状態をコントロールするclassを用意しておき、classの付け替えで
表示が切り替わるようにもしておきます。（アコーディオンの＋/−切替など）
.tabと.acr-titleはそれぞれタブレットのみ、スマホのみ必要な要素なので、
メディアクエリで分岐して不要な方をdisplay:none;するようにしておきます。

JSは**「アコーディオン開閉」の関数と、「タブパネル」の関数**を別々に定義しておきます。
トリガーとなる要素自体がブレイクポイントを境目としてCSSで表示／非表示を切り替える前提なので、
それぞれ別の独立した関数で定義しても基本的には問題なく動くはずです。
「アコーディオンだけ」「タブ切替だけ」であればそれぞれ比較的シンプルなスクリプトで済むので
初心者でも書きやすいはずです。

最後に、ブレイクポイントをまたいだ時にタブ表示／アコーディオン表示でそれぞれ
初期状態に戻すようにする表示リセット用の関数も用意しておく必要があるかもしれません。
デフォルトでどれかひとつのパネルを最初から開いておきたい、などの要望がある場合には
おそらく必ず必要です。

質問者さんの掲載されたコードに対する解決案ではないので申し訳ないですが、
先日同様の案件をやったので参考までに…。

（CSS/JSは面倒臭いので割愛します…）

投稿2016/11/09 13:45

編集2016/11/09 13:46

aKusano

総合スコア3763

Asibe

2016/11/10 07:35

お返事ありがとうございます。ご提示いただいたHTMLコードを拝見いたしました・・・私が質問したコードと照らし合わせてみるとaKusano様のコードは両方の使い分けがしやすいよう配慮されていることがわかります。これをJqueryで動かす場合は、スマホ時にアコーディオンみだしをクリックしたらコンテンツ出るようにしてタブレット以降はアコーディオンに利用した箇所を非表示にして、メインのタブメニューの方でコンテンツ部分を切り替えていく方向でいいのかな？思ったように動かせるように参考サイトさまのソースと睨めっこしてみます。ありがとうございました。

行動規範の内容に同意します