Angular UI Bootstrap responsive tab collapse

Question

I want to make a sidebar have all of it's content displayed while on a pc (=>sm) and have it tabbed while on a phone (

Effectively hiding all of the tab controls and just display all of the tabs as though they were an expanded accordion.

example sidebar While on phone is should look like 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 a larger screen it should look like the 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 is a better option besides tabs I would be open to that although the visual controls need to look like justified tabs in the end. I am open to other suggestions, I could do

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

however that does produce a larger html file that needs to be loaded, and the inner content would need to be manually synced if anything is dynamically changed by the user.

Thank you!

can you share code for this fix in some plunker or add as answer — Vish
– Vish, Commented Nov 19, 2014 at 19:43
Not a fix just two versions of code. One hidden-xs the other visible-xs — Jegsar
– Jegsar, Commented Nov 19, 2014 at 22:43

mcgraphix · Accepted Answer · 2015-09-17 15:51:11Z

2

I know this is somewhat of an old question, but the need comes up a lot and a simple solution is needed. If you just want to display all the tabs as if they were open, you can override the CSS that hides it inside a media query for the size at which you want to switch from tabs to show everything:

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

Then you can hide the tab controls

 ul.nav-tabs {
    display:none;
 }

All the tabs will appear as if they are expanded.

If you want to convert them into an accordion (which seems to be the common request), you can override the template for the tabset to include a tab header and then show hide it based on media queries for various screen sizes. Here is a fiddle showing how you would do it http://jsfiddle.net/mcgraphix/bamtaap1/

answered Sep 17, 2015 at 15:51

mcgraphix

2,7331 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ismail baig Over a year ago

I have got an issue with ui-bootstrap-tpls, i.e. it wont trigger the ng-click event in accordian mode . please find the jsfiddle link for the same.jsfiddle.net/ismailbaigjsfiddle/3rxyf6ps/1. Could you please check and answer this. Stackoverflow question at stackoverflow.com/questions/35765587/…

Jago · Accepted Answer · 2014-09-12 15:57:57Z

0

You might be interested in either bootstrap-tabcollapse or bootstrap-responsive-tabs. Their behavior is a bit different than your purpose, but to sum up, they handle tabs in small and large screens.

They do similar thing:

When in large screen, you get a tabbed content (horizontal organization).
When in small screen, you get an accordion (vertical organization).

You might want to give them a look and/or a try. I know they don't have an Angular directive or similar, but their implementation seems easy enough not to threaten Angular controller integrity.

answered Sep 12, 2014 at 15:57

Jago

2,9645 gold badges31 silver badges43 bronze badges

1 Comment

Jegsar Over a year ago

They are very useful when that is the effect you are looking for and can be used in angular easily enough however that isn't what I'm looking for. I ended up just writing two separate pieces of code. One for xs and one !xs.

Collectives™ on Stack Overflow

Angular UI Bootstrap responsive tab collapse

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related