0

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)

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
user2936008
  • 1,317
  • 5
  • 19
  • 42

1 Answers1

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

Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44
  • I want drop down (which will be expanded and collapsed ) Not the accordian , contents are outside the dropdown – user2936008 Feb 18 '16 at 22:32
  • Ok.. what do you want in that dropdown options then? – Nikhil Nanjappa Feb 18 '16 at 22:34
  • I just want to know if I can use the same tabs and show them as drop down, I was actually thinking of ng-hide and css property display:none with media queries. 1) On click of the active tab should show other two tabs in dropdown fasion , when I choose 2nd tab other two tabs should be hidden and active tab should be shown... – user2936008 Feb 18 '16 at 22:42
  • Updated my answer along with a Fiddle. – Nikhil Nanjappa Feb 18 '16 at 23:01