モバイルビューでブートストラップナビゲーションバーをアコーディオンに変更するためのCSS

Question

私はこのhtmlコードを持っています。

div class="container screen-only"> 

<ul class="nav nav-tabs customNavBars"> 

      <li class=" marginForFirstElement active" id="listEle1" onclick="changeActiveClass(this)"> 
       <a href="#" > 
        <div> 
        heading 1 
        </div> 
       </a> 
      </li> 
      <li id="listEle2" class="" onclick="changeActiveClass(this)"> 
       <a href="#" > 
        <div> 
        heading 2 
        </div> 
       </a> 
      </li> 
    </ul> 

    </div> 

<div id="listEle1"> 
    content1 
    </div> 
    <div id="listEle2"> 
    content2 
    </div> 

と対応するJavaScriptコード、

function changeActiveClass(val){ 
    var idForCheck = val.id; 
     check = $("#" +idForCheck).hasClass("active"); 
    if(check == false){ 
     console.log("check == false") 
     if(idForCheck == "listEle1"){ 
      $("#" +idForCheck).addClass("active"); 
      $("#listEle2").removeClass("active"); 
      $("#paymentHistoryClass").css("display","block"); 
      $("#epayments").css("display","none"); 
    } 
     else if(idForCheck == "listEle2"){ 
      $("#" +idForCheck).addClass("active"); 
      $("#listEle1").removeClass("active"); 
      $("#paymentHistoryClass").css("display","none"); 
      $("#epayments").css("display","block"); 
     } 

    } 
    } 

このコードは正常に動作します。 しかし、モバイルビュー、つまり画面サイズが992ピクセル未満のときにタブをアコーディオンに変えたいとします。

モバイルビューでは、次のようになります。

------------------------- 
    [  heading 1  ] 
    ------------------------- 
    |      | 
    |  content1  | 
    |      | 
    ------------------------- 


    ------------------------- 
    [  heading 2  ] 
    ------------------------- 
    |      | 
    |  content2  | 
    |      | 
    ------------------------- 

モバイルビューでタブをアコーディオンに変換するためのCSSまたはjscriptコードを入力してください。

どうもありがとう:)

Answer 1

は、ブートストラップ]タブ-崩壊を使用します。https://github.com/flatlogic/bootstrap-tabcollapse

それは実現するのはとても簡単ですし、余分なコードを必要としません。

Answer 2

もっと速くなることを確実にしてください。

よろしくお願いします！

CODE BOOTPLY