Angular UI Bootstrap responsive tab collapse -


i want make sidebar have of it's content displayed while on pc (=>sm) , have tabbed while on phone (

effectively hiding of tab controls , display of tabs though expanded accordion.

example sidebar while on phone should this

<div class="col-xs-12 col-sm-4">   <tabset>     <tab heading="tab 1">       <div class="col-xs-12">         tab 1 content       </div>     </tab>     <tab heading="tab 2">       <div class="col-xs-12">         tab 2 content       </div>     </tab>   </tabset> </div> 

while being displayed on larger screen should following

<div class="col-xs-12 col-sm-4">   <div class="col-xs-12">     tab 1 content   </div>   <div class="col-xs-12">     tab 2 content   </div> </div>     

if there better option besides tabs open although visual controls need justified tabs in end. open other suggestions, do

<div class="visible-xs">   tabbed code </div> <div class="hidden-xs">   plain code </div> 

however produce larger html file needs loaded, , inner content need manually synced if dynamically changed user.

thank you!

i know of old question, need comes lot , simple solution needed. if want display tabs if open, can override css hides inside media query size @ want switch tabs show everything:

 .tab-content > .tab-pane {     display:block;  } 

then can hide tab controls

 ul.nav-tabs {     display:none;  } 

all tabs appear if expanded.

if want convert them accordion (which seems common request), can override template tabset include tab header , show hide based on media queries various screen sizes. here fiddle showing how http://jsfiddle.net/mcgraphix/bamtaap1/


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -