質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.77%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 5,870

score 14

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

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

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

イメージ説明

スマホ時
イメージ説明

タブレット時
イメージ説明

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

<div class="wrapper">
  <ul class="accordion-nav">
   <li>
    <a class="accordion-link">リンク1<span class="plus"></span></a>
<section id="active" class="Section  l-column tabs">
  <div class="l-row">
 <div class="Description_Panel l-halfColumn">
   <div class="Description__sub">
   <img class="Description__thumb" src="http://placehold.it/275x250">
   </div>

  <div class="Description__main">
    <h3 class="Description__head">見出し</h3>
     <div class="Description__body">
      <p class="Description__txt">
      テスト
      </p>
     </div>

    <div class="Description__foot">
        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
      <p class="Description__foot-txt">
       テスト
      </p>
    </div>
   </div>
  </div>

 <div class="Description_Panel l-halfColumn">
   <div class="Description__sub">
      <img class="Description__thumb" src="http://placehold.it/275x250">
   </div>

  <div class="Description__main">
    <h3 class="Description__head">見出し</h3>
     <div class="Description__body">
      <p class="Description__txt">
      テスト
      </p>
     </div>

    <div class="Description__foot">
        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
      <p class="Description__foot-txt">
       テスト
      </p>
    </div>
   </div>
 </div>
</div>

  <p id="close" class="mt-10 mb-15 btn-close btn-link">
        <a href="#" class="close-link">閉じる</a>
      </p>
</section>
</li>

<li>
 <a class="accordion-link">リンク2<span class="plus"></span></a>
<section class="Description  l-column tabs">
  <div class="l-row">
 <div class="Description-Panel portraot l-tripartitionColumn">
   <div class="Description__sub">
      <img class="Description__thumb" src="http://placehold.it/275x250">
   </div>

  <div class="Description__main">
    <h3 class="Description__head">見出し</h3>
     <div class="Description__body">
      <p class="Description__txt">
       テスト
      </p>
     </div>

    <div class="Description__foot">
        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
      <p class="Description__foot-txt">
        テスト
      </p>
    </div>
   </div>
  </div>
</div>

<p id="close" class="mt-10 mb-15 btn-close btn-link">
        <a href="#" class="close-link">閉じる</a>
      </p>
</section>
</li>

<li>
 <a class="accordion-link">リンク3<span class="plus"></span></a>

<section class="Section  l-column tabs">
  <div class="l-row">
 <div class="Description-Panel portraot l-tripartitionColumn">
   <div class="Description__sub">
     <img class="Description__thumb" src="http://placehold.it/275x250">
   </div>

  <div class="Description__main">
    <h3 class="Description__head">見出し</h3>
     <div class="Description__body">
      <p class="Description__txt">
      テスト
  </p>
     </div>

    <div class="Description__foot">
        <h5 class="Description__foot-ttl"><span>Memo</span></h5>
      <p class="Description__foot-txt">
       テスト
      </p>
    </div>
   </div>
  </div>
   </div>

  <p id="close" class="mt-10 mb-15 btn-close  btn-link">
        <a href="#" class="close-link">閉じる</a>
      </p>
</section>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"> 
 $(function(){

   var rwdTab = $(".accordion-nav");
   var switchPoint = 640;
   var fadeSpeed = 500;

   var contentArea = rwdTab.children('li').children('a');

  $('.accordion-nav').children('li').first().children('a').addClass('selected').next().show();

 $(".accordion-nav > li > a").click(function(){
     if(!$(this).hasClass('selected')){
      $('.accordion-nav').removeClass('selected');
     $(this).addClass('selected');

    if(window.innerWidth > switchPoint){
       contentArea.fadeOut(fadeSpeed);
        $(this).next().fadeIn(fadeSpeed);
 } else {

      var click= $("+section",this);

      click.slideDown("fast");

      $(".accordion-nav section").not(click).slideUp("fast");

    $(this).removeClass("selected"); 
    $(".selected").removeClass("selected");
    $(this).addClass("selected");

     return false;
  }
 }
});
});
</script>


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

.accordion-nav{
  margin: 30px auto;
  position: relative;
  max-width: 768px;
  width: 95%;
}

@media screen and (min-width: 768px){
    .accordion-nav{
       position: relative;
       width: 95%;
    }    

    .accordion-nav li{
      display: inline;
    }
}

.accordion-link{
  display: block;
  padding: 10px 12px;
  position: relative;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  background-color: #20c1ea;
  border-bottom: 1px solid #fff;
  cursor: pointer;
  color: #fff;
}

.accordion-link::after{
  content:"";
  display: block;
  position: absolute;
  top: 8px;
  right: 10px;
  bottom: 0;
  width: 20px;
  height: 12px; 
  background-size: 100% auto;
  -webkit-transition: 0.3s linear; 
  -moz-transition:0.3s linear; 
  -ms-transition:0.3s linear; 
  transition: 0.3s linear;
}

@media screen and (min-width: 768px){
    .accordion-link{
      display: inline-block;
    }
}

.accordion-link:hover{
  background-color: #5997a7;
}

/*sectionの本体部分を非表示に*/
.tabs{
  display: none;
}

/*選択時に現在の箇所の色を変える*/
.selected{
  background-color: #ffc44d;
}

試したこと

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

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

  • WebPark様 http://weboook.blog22.fc2.com/blog-entry-347.html
  • black-flag様   http://black-flag.net/jquery/20151215-5858.html
  • codepen様
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

<!-- タブメニュー(640px以下では表示しない) -->
<ul class="tab only-tab">
  <li data-tab="#link1">リンク1</li>
  <li data-tab="#link2">リンク2</li>
  <li data-tab="#link3">リンク3</li>
</ul>
<!-- タブbody-->
<div id="link1">
  <div class="acr-title only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
  <div class="acr-body">
    //ここにコンテンツを入れる
  </div>
</div>
<!-- タブbody-->
<div id="link2">
  <div class="acr-title only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
  <div class="acr-body">
    //ここにコンテンツを入れる
  </div>
</div>
<!-- タブbody-->
<div id="link3">
  <div class="acr-title only-sp">アコーディオン見出し</div><!-- タブレット以上では表示しない -->
  <div class="acr-body">
    //ここにコンテンツを入れる
  </div>
</div>

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/10 16:35

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

    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る