Menu icon Foundation
Closable Tabs

Hello everyone,

like the title say, i'm using tabs and I've implement a feature to open tabs when clicking in a link but I also what to close my tabs. To do this, I've think of a button in the header of the tabs, but don't know how to add it.
If I'm not clear, I want à clos button in my tabs like the one we can add in modal with :

<a class="close-reveal-modal" aria-label="Close">&#215;</a>

Do anyone know how to do this ?
            

         

tabsclosebutton

Hello everyone,

like the title say, i'm using tabs and I've implement a feature to open tabs when clicking in a link but I also what to close my tabs. To do this, I've think of a button in the header of the tabs, but don't know how to add it.
If I'm not clear, I want à clos button in my tabs like the one we can add in modal with :

<a class="close-reveal-modal" aria-label="Close">&#215;</a>

Do anyone know how to do this ?
            

         
Bob Sawyer over 4 years ago

I'm still not sure why you would want to close tabs -- that kind of goes against the UI -- but whatever. Here's how you can add the close buttons to the tabs:

http://codepen.io/bobsawyer/pen/KppwoZ

merlin goulet over 4 years ago

Thank's for that, the cross will be very useful. But, for me, the tabs doesn't close at all, he just show me a header in two part, one with the name and one with the cross.

And I use the tabs to build a onglet system, like the one in your browser, so the tabs have to be closable.

Do you know a way to move the cross ahead of the header ? Or maybe to the right of him ? I can handle the close function in jQuery.

Bob Sawyer over 4 years ago

Sure, in the example code, it's as easy as changing this:

right:4px; 

to this:

left:4px; 

and adding:

margin-top:-8px;

if you want the button to line up with the text.