Help!! Cara merubah bootstrap tabs jadi toggle menu ketika di mobile

Temen" mohon bantuannya, ada yg tau cara merubah bootstrap tabs jadi responsive, jadi ketika di mobile tampilannya kaya gini. nNRrAAc.png normalnya yg udah saya buat begini. ZKF1UQG.png kalo di layar kecil malah numpuk kaya gini. YM7vOZc.png pengennya kaya gambar yg pertama, mohon bantuannya. ini link codepen saya, barang kali mau langsung ngedit silahkan https://codepen.io/kiwiranto/pen/aVVqmw?editors=1100
avatar kiwiranto

Ditanyakan oleh @kiwiranto

5 Kontribusi 0 Poin

Login untuk menanggapi


Jawaban

Bisa coba ikuti link brikut sbagai referensi gan https://openam.github.io/bootstrap-responsive-tabs/
avatar zergz

Dijawab oleh @zergz

62 Kontribusi 47 Poin

Login untuk menanggapi


sayangnya itu responsive jadi accordion gan, but Terima kasih responnya gan
avatar kiwiranto

Dijawab oleh @kiwiranto

5 Kontribusi 0 Poin

Login untuk menanggapi


sbenernya lebih enak pake panel group dari pada make tab kalo masih kurang puas di otak atik aja sendiri...
 
<div class="container">

  <nav >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#tes" >
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        
      </button>
    </div>
  </nav>
  
   <div class="collapse navbar-collapse" id="tes">
  <div class="panel-group" id="accordion" >
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Tab 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">
        <h2>tab1</h2>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Tab 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
        <h2>Tab 2</h2>
       
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Tab 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">
        <h2>tab3</h2>
        </div>
      </div>
    </div>
  </div> 
</div>
    </div> 
untuk css nya tambahin ini biar keliatan karna background putih
 .icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
} 
  
avatar kodrenk

Dijawab oleh @kodrenk

18 Kontribusi 3 Poin

Login untuk menanggapi


dari w3schools
 https://askprog.com/reads/4 
avatar Nandar

Dijawab oleh @Nandar

626 Kontribusi 196 Poin

Login untuk menanggapi


Login untuk gabung berdiskusi