Bootstrap Tabs Not Letting me change ID - javascript

Alright, I am building an application that has Bootstrap Tabs. I have all the .js files that Twitter Bootstrap has to offer in my head tag.
When I add tabs like this it works
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Test 1</div>
<div class="tab-pane" id="tab2">Test 2</div>
<div class="tab-pane" id="tab3">Test 3</div>
<div class="tab-pane" id="tab4">Test 4</div>
</div>
<script>
$(function(){
$('#myTab a:last').tab('show');
});
</script>
But on the other hand, when I change the ID on the tabs in my JavaScript and HTML, it does not work any more...
<ul class="nav nav-tabs" data-tabs="tabs" id="changedID">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Test 1</div>
<div class="tab-pane" id="tab2">Test 2</div>
<div class="tab-pane" id="tab3">Test 3</div>
<div class="tab-pane" id="tab4">Test 4</div>
</div>
<script>
$(function(){
$('#changedID a:last').tab('show');
});
</script>
Is there any way to fix this issue with bootstrap tabs, because this will get really annoying if I cannot put more than one set of tabs on the same page.

Try adding data-toggle="tab" to your links, and make sure your second set of tabs on the page have different id's
http://jsfiddle.net/JqGt9/1/
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Test 1</div>
<div class="tab-pane" id="tab2">Test 2</div>
<div class="tab-pane" id="tab3">Test 3</div>
<div class="tab-pane" id="tab4">Test 4</div>
</div>
</div>
<div class="container">
<ul class="nav nav-tabs" id="myTab2">
<li class="active">Post Update</li>
<li>Post Photos</li>
<li>Post Video</li>
<li>Create a Poll</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab5">Test 5</div>
<div class="tab-pane" id="tab6">Test 6</div>
<div class="tab-pane" id="tab7">Test 7</div>
<div class="tab-pane" id="tab8">Test 8</div>
</div>
</div>

Try this format.
<ul class="nav nav-tabs" id="myTab">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p> I'm in Section 2.</p>
</div>
</div>
----------
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})

Related

How to make bootstrap multiple tab group that shares same ID

First of all I understand that there should not be multiple instance of same ID but I am looking for better solution that will help me to complete my requirement. Below is just an example of what I am trying to do:
<div class="tab-group-1">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>About</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>
<div class="tab-group-2">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>About</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>
Here is something but you have small changes :
Bootply : http://www.bootply.com/U0LkomjCne
Explain : change a[href] by a[data-target] and prefix the target with the wrapper class.
HTML:
<div class="tab-group-1">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a data-target=".tab-group-1 #abc1" data-toggle="tab">Home</a></li>
<li><a data-target=".tab-group-1 #abc2" data-toggle="tab">About</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>
<div class="tab-group-2">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a data-target=".tab-group-2 #abc1" data-toggle="tab">Home</a></li>
<li><a data-target=".tab-group-2 #abc2" data-toggle="tab">About</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="abc1">Home tab content</div>
<div class="tab-pane" id="abc2">About tab content</div>
</div>
</div>

Bootstrap Nav-tab show hide content

In the app that I am building to learn Rails and JS, I want to use tab-navigation.
This is my tab-navigation pointing to 3 sections. I am now looking to create the JavaScript. How to I approach this when clicking the tabs and set class active to the clicked <li> while display the respective section?
I can't do getElementById or so. So, I need something like this structure:
$("li.presentation").on("click", function(event) { ...
$(...).class("active");
$(...).toggle();
};
All help appreciated!
<nav>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Details</li>
<% unless #annotation.new_record? %>
<li role="presentation">Tags</li>
<li role="presentation">Comments</li>
<% end -%>
</ul>
</nav>
Sections
<section id="tab1" class="tab1">
<p>Section 1 content here </p>
</section>
<section id="tab2" class="tab2">
<p>Section 2 content here </p>
</section>
<section id="tab3" class="tab3">
<p>Section 1 content here </p>
</section>
<section id="tab3" class="tab3">
<p>Section 3 content here </p>
</section>
This is my css
.tab1 {
display: block;
}
.tab2 {
display: none;
}
.tab3 {
display: none;
}
You don't need to roll out your own custom JavaScript and css to accomplish this. You can use Bootstrap's built-in data-toggle="tab" attribute in your tab anchors.
<div class="container">
<ul class="nav nav-tabs">
<!-- add data-toggle attribute to the anchors -->
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
Here is a live demo:
http://www.bootply.com/ZSu8N3bB03

Bootstrap tabs without anchors?

I wonder whether it is possible to write Bootstrap tabs without using anchor elements <a>?
The reason I want to know is that I want to add elements inside the tab that are not valid children of <a> - in my case I want to add an <input> (note the <input> is not used to control the tabs, as such).
An archetype tab example may be:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
I know I can make tabs show programmatically using:
$('#tab1').tab('show')
But that appears to depend on the fact that it's an <a>. Could I use a <div>, for example, and hook into the click event with JQuery?
I would need some way to specify the href if I were to do it that way.
You can use any other element. Instead of href attribute, use data-target.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><span data-target="#tab1" data-toggle="tab">Section 1</span ></li>
<li> <span data-target="#tab2" data-toggle="tab">Section 2</span ></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
No need for custom javascript, but you need to style. Example in jsfiddle.
I think you can do something like this
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTabs" role="tablist">
<li role="presentation" class="active"> <input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title=""></li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
<div id="clickdiv" style="background-color: red;width: 20px;height: 20px"></div>
<script type="text/javascript">
$("#clickdiv").click(function(){
// $('#myTabs a:first').tab('show') // Select first tab
// $('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)
});
</script>
You can use data-target on the inputs..
<input data-target="#..." data-toggle="tab" class="form-control">
Demo: http://www.codeply.com/go/mXUpU5b2x0

How can I customize tabs in Wordpress?

I am trying to create customized, togglable tabs in wordpress, but I am stuck. I would like to change the title part of the tabs to images. Something like that, but in wordpress:
http://jsfiddle.net/iamraviteja/ttpxoxob/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a>
</li>
<li>
<a data-toggle="tab" href="#menu1">
<img src="http://www.downloadsbyvita.com/images/video.jpg" />
</a>
</li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Either you can use bootstrap or inbuilt jquery ui. Or Tabs Shorcode plugin

How do I have links open a specific tab inside a Bootstrap modal?

I have 5 links at the bottom of a webpage. They link to a Bootstrap modal with tabs that match the links on the webpage, but it always defaults to the first tab/tab content. How can I have the links open the correct tab/tab content in the modal.
Here is my code for the modal and the links that are on the webpage:
<div id="LegalModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#283c5a; border-radius: 5px 5px 0 0;">
Close
<h3>rateGenius Legal Terms & Agreements</h3>
</div>
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Terms of Use</a></li>
<li>Privacy Policy</li>
<li>Mobile Privacy Policy</li>
<li>Security</li>
<li>Licensing</li>
</ul>
<div class="tab-content" id="tabs" style="padding:30px;">
<div class="tab-pane active" id="tab1">
<h1>Terms of Use</h1>
</div>
<div class="tab-pane" id="tab2">
<h1>Privacy Policy</h1>
</div>
<div class="tab-pane" id="tab3">
<h1>Mobile Privacy Policy</h1>
</div>
<div class="tab-pane" id="tab4">
<h1>Security</h1>
</div>
<div class="tab-pane" id="tab5">
<h1>Licensing</h1>
</div>
</div>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
</div>
</div>
<ul class="list-unstyled" style="text-align:center;">
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Terms of Service</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Privacy Policy</a></li>
<li><a href="#LegalModal" data-target=".bs-example-modal-lg" data-toggle="modal" >Mobile Privacy Policy</a></li>
<li>Security</li>
<li>Licensing</li>
</ul>
Have the anchor toggle both the modal and the correct tab by hooking up some custom jQuery to the links:
$(function() {
$('.legal-tabs li').on('click', function() {
var tab = $(this).index();
$('#LegalModal .modal-body .nav-tabs a:eq(' + tab + ')').tab('show');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="LegalModal" class="modal fade bs-example-modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a class="tab1" href="#tab1" data-toggle="tab">Tab 1</a></li>
<li>Tab 2</li>
</ul>
<div class="tab-content" id="tabs" style="padding:30px;">
<div class="tab-pane active" id="tab1">
<h1>Terms of Use</h1>
</div>
<div class="tab-pane" id="tab2">
<h1>Privacy Policy</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="list-unstyled legal-tabs" style="text-align:center;">
<li>Show tab 1</li>
<li>Show tab 2</li>
</ul>

Categories