CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrap
user3285371
user3285371

Reputation: 53

Hide Tabs Heading with Angular UI / Bootstrap UI

I'm struggling to hide the heading from tabs created using Angular UI.

For my solution I need to set the buttons of the tab in the header and the contents in another container on the page.

I need to hide the tab buttons rendered by the directive.

Any idea?

<div id="menuTabs">

<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu1 = true">Menu1</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu2 = true">Menu2</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu3 = true">Menu3</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu4 = true">Menu4</div>

</div>

<div data-tabset id="menuTabs">
<div data-tab data-active="tabActiveMenu1">
<div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content1
</div>
<div data-tab data-active="tabActiveMenu2">
    <div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content2
</div>
<div data-tab data-active="tabActiveMenu3">
    <div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content3
</div>
 <div data-tab data-active="tabActiveMenu4">
    <div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content4
</div>

Upvotes: 3

Views: 3268

Answers (2)

Jack Davis
Jack Davis

Reputation: 11

I too was looking for way to remove all the tab headers. Here's what I found was needed:

.nav>li>a,
.nav-tabs {
    display: none;
}

The second line was necessary to remove the solid line at the bottom of the tab headers

Upvotes: 1

jme11
jme11

Reputation: 17362

If you want to hide all but the active tab, you can do this in CSS with the following:

.nav>li>a {
  display: none;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  display: block;
}

demo

If you want to remove all of the tabs, and just show the content, you could possibly edit the templates or use only the first rule above (so the tabs are always hidden active or not).

Upvotes: 2

Related Questions