Hide Tabs Heading with Angular UI / Bootstrap UI

Question

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>

Answer 1

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).