Bootstrap toggleable tabs without having tab links

Question

Is there a way to do the following

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
  <div class="tab-pane" id='extra'> .... </div>

</div>

so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event

as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?

note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc

KyleMit · Accepted Answer · 2015-05-26T13:50:49.577

5

You could add the tab for extras and then just hide it

Add this to your nav-tabs:

<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>

Then activate from somewhere else with JavaScript:

$("#launchExtra").click(function() {
    $('#myTab a[href="#extra"]').tab('show')
});

Working demo in jsFiddle

Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.

So first remove all the active elements and then add back the active class:

$("#launchExtra").click(function() {
    $(".nav-tabs .active, .tab-content .active").removeClass("active");
    $("#extra").addClass("active");
});

Working demo in jsFiddle

edited May 26 '15 at 13:50

answered Sep 06 '14 at 13:51

KyleMit

30,350
66
462
664

No need to define `.hidden` yourself, it's already part of Bootstrap: http://getbootstrap.com/css/#helper-classes-show-hide – cvrebert Sep 07 '14 at 00:51
@cvrebert, I thought I came up with that name from somewhere :) – KyleMit May 26 '15 at 13:51
The downside to your second approach is that you don't get events such as 'show.bs.tab', 'shown.bs.tab', etc. – Ben Collier Jan 21 '16 at 21:17
1

@BenCollier, true. the second step is rolling your own implementation so there might be some other things that are missed. If you wanted to add events, you could fire them yourself with something along the lines of [`$(this).trigger({type:'shown.bs.tab'})`](https://github.com/twbs/bootstrap/blob/v3.3.6/js/tab.js#L59) – KyleMit Jan 21 '16 at 21:53

score 1 · Answer 2 · answered Nov 05 '19 at 13:51

1

Create a link in memory and call the tab function on it.

$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")

answered Nov 05 '19 at 13:51

vise

12,713
11
52
64

score 0 · Answer 3 · answered Jun 14 '17 at 12:42

an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.

<ul class="nav nav-tabs">
  <li role="presentation" class="active">
   <button class="btn btn-sm btn-link">Tab1</button>
  </li>
</ul>

nows its a button and will not navigate. Just add any javascript you want to it. But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route

Bootstrap toggleable tabs without having tab links

3 Answers3

Working demo in jsFiddle

Working demo in jsFiddle

Linked