Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to make a responsive accordion layout using bootstrap 3?

How do i layout bootstrap grids if i want to make this responsive layout?

In the images below, the small box is like a tab, when clicked it will show the content at the bottom of it.

When the window / viewed in smaller screen it will reduce the columns accordingly however it should preserve its functionality.

Desktop

Desktop

Tablets

Desktop

Mobile

Desktop

Bootstrap layout

 <div class="row">

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>                
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>

  <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>   

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>     

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#" class="double-line">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>  

      <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
        <a href="#">TAB NAME</a>
        <div class="col-md-12 what-content">TAB CONTENT</div>
        <div class="clearfix"></div>
      </div>
  </div>
like image 523
Wreeecks Avatar asked May 05 '14 12:05

Wreeecks


1 Answers

This can be accomplished with the collapse javascript functionality in Bootstrap. See http://getbootstrap.com/javascript/#collapse

You could use this code snippet to accomplish it.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  Simple collapsible </button>
 <div id="demo" class="collapse in">...</div>

And then try this:

  <div class="col-md-3 col-sm-6 col-xs-12 what-tab">
     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">Button to toggle open and close</button></div>
   <div id="demo" class="collapse in col-md-12 what-content">...</div>

You will need to do the rest of the code, but this should get you started.

like image 152
moodyjive Avatar answered Nov 09 '22 13:11

moodyjive