(Mobile View) How to make UI tabs heading to work as a drop down

Question

How to make UI bootstrap existing tab heading section to the drop down in the mobile view.

HTML:

<div>
<div ng-controller="TabsDemoCtrl">
    <hr />
    <tabset justified="true">
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}">
        <div class="tab-content">
        {{tab.content}}
        </div></tab>
    </tabset>
    <hr />

</div>

CSS:

.tab-content {
      text-align: center;
      background-color: #eef0f1;
      padding-top: 35px;
      font-weight: 700;
    }

JS Fiddle Link :

UI Tab Heading JS Fiddle

Currently the UI Tab view changes to the vertical lines in the mobile view (how can i hack the current UI tab to make it drop down (only in the mobile view)

Answer 1

Well this is simple.

You just need to have a dropdown element present side by side next to the tab elements, and depending on the viewport size you can toggle between the visibility of the dropdown(made visible on mobile and disappear otherwise).

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle inmobile" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li> 
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

CSS

.inmobile {
  display: none !important;
}

@media only screen and (max-width: 480px) {
    .inmobile {
        display: block !important;
    }
}

You just add a class say .inmobile to the dropdown-toggle anchor tag, and use the media queries to target that element(the whole dropdown will hide/show just by toggling that one anchor tag).

Here is the Fiddle