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>

I'm confused as to what you are asking here. Are you trying to make the tab button completely disappear? Or are you trying to hide the heading of the web page? In any case, it sounds like ng-hide, ng-show, ng-if, and (if you still want the button to be shown, just diabled) ng-disabled. I highly recommend looking into those directives. — Daniel Jamrozik
– Daniel Jamrozik, Commented Feb 8, 2015 at 19:13
Hi, thanks for supporting me. With the html that I've posted I would have two buttons to activate the contents. The first one is created be my inside of the element menuTabs and the second one will be rendered by the agnular ui tabs directive. I need to hide the second one and I don't know how to get access to it through parameters to add a class or any other workaround — user3285371
– user3285371, Commented Feb 8, 2015 at 19:42

jme11 · Accepted Answer · 2015-02-10 14:23:51Z

2

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

answered Feb 10, 2015 at 14:23

jme11

17.9k2 gold badges40 silver badges49 bronze badges

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

2 Comments

user3285371 Over a year ago

Thanks a lot! that gave me an idea. I was making this too complicated. I don't know why I couldn't add a css class to the element but finaly it worked at it should and I just did .my-menu-class>ul.nav-tabs{display: none}

jme11 Over a year ago

Great. If it answered your question, please mark it accordingly so others may benefit from it in the future.

Jack Davis · Accepted Answer · 2017-03-02 01:29:02Z

1

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

answered Mar 2, 2017 at 1:29

Jack Davis

111 bronze badge

Collectives™ on Stack Overflow

Hide Tabs Heading with Angular UI / Bootstrap UI

2 Answers 2

demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related