CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptabs
Nick Ginanto
Nick Ginanto

Reputation: 32130

Bootstrap toggleable tabs without having tab links

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

Upvotes: 7

Views: 11532

Answers (3)

vise
vise

Reputation: 13383

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

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

Upvotes: 1

Jens Alenius
Jens Alenius

Reputation: 1931

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

Upvotes: 0

KyleMit
KyleMit

Reputation: 29927

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

Upvotes: 5

Related Questions