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
Post a Comment