I am using nav-link for tabs need to go second tab directly after 1 tab submit
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">VIEW ENTITIES</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">CREATE ENTITY</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
What I tried
('#profile').show()
If i understand correctly you mean you need to trigger the tab2 when you click on tab1 right?
Then use the Jquery Trigger:
$('#profile-tab').trigger('click');
Please let me know if this helps
HTML Nav Tabs Bootstrap 4
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
aria-selected="true">VIEW ENTITIES</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
aria-selected="false">CREATE ENTITY</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
aria-selected="false">Contact</a>
</li>
</ul>
Content tabs
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<input class="btn btn-info nextTab" type="submit" >
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<input class="btn btn-info nextTab" type="submit" >
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<input class="btn btn-info nextTab" type="submit" >
</div>
</div>
Generic next step
<script>
jQuery(function(){
jQuery('.nextTab').on('click',function(){
//Unidirectional -->
var nextTAB = this.parentElement.nextElementSibling;
if ( nextTAB != undefined ) {
//Do some stuff and then.. change the tab.
jQuery('#'+nextTAB.id+'-tab').trigger('click');
}
});
});
</script>
Related
When i select a pill on the list i need to show an URL to use in other thing, but it has an href="#pills-something" who direct to a id bellow.
I need something like:
mysite.com/myspecificpill or
mysite.com/pills-home-tab
mysite.com/pills-contact
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
If I've understood what you're asking correctly, it sounds like you're wanting to look like you're navigating, without actually navigating? If so, the only real way I can think of doing it is to put it in the query string (i.e. mysite.com/mypage?tab=pills-profile). If that's suitable for you then you just need to alter your Page_Load method to check the query string for the parameter.
This will check the query string if added the Page_Load method in the ASPX code behind.
if(Request.QueryString["tab"] != null && Request.QueryString["tab"] == "pills-profile")
{
//Do the relevant stuff for the profile page here
}
Then, if you alter the HTML to:
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="mypage?tab=pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="mypage?tab=pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="mypage?tab=pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
You can use various different methods to show the relevant panel.
I'm using the non JQuery library bootstrap-native for Bootstrap 4 Link and I need to open a tab programmatically.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
When with jquery I would do:
$('#contact').tab('show')
.tab('show') doesn't work, is there a way to do this with plain javascript?
<! --You Forgot creating container div -->
<div id="TabMain" class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact- tab">Contacts</div>
</div>
</div>
So I have been wracking my brain and googling skills and I've set to find a simple answer. I've found an alternative solution to what I was trying to achieve but it's bothering me that was I was initially was trying to do didn't work no matter what I did.
So here's what I have
I have a bootstrap progress bar and bootstrap nav-pills - shown using an image,
progress bar and tabs for visual aid
I am fairly new and I do struggle between the differences of JavaScript and jQuery but don't mind using either and sorry if I mixed and matched.
** I DON'T SET THE CLASSES TO ACTIVE - I'M ASSUMING BOOTSTRAP DOES **
When inspecting in the browser the active class changes from tab to tab when selected. I'm wanting to have a function that checks that its there and increased the width of the progress bar depending on the selected tab.
I have a solution but I wanted to know why none of this works ( if you want the solution I can edit and share a demo )
to call the class I've tried:
$().hasClass
$().className
$().classList.contains
to get the element that needs to be checked for the class I've tried
getElementById
document.querySelector
const pill1 = $()
const pill1 = getElementbyID
const pill = document.querySelector
Just having no luck
<div class="container">
<!-- PROGRESS BAR -->
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:10%">
</div>
</div>
<!-- PROGRESS BAR END -->
</div>
<div id="tabs" class="container">
<!-- TABS -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li id="pills-contactDetails-tab" class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="true">Contact Details</a>
</li>
<li id="pills-FAQ1-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ1" role="tab" aria-controls="pills-FAQ1" aria-selected="false">FAQ 1</a>
</li>
<li id="pills-FAQ2-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ2" role="tab" aria-controls="pills-FAQ2" aria-selected="false">FAQ 2</a>
</li>
<li id="pills-FAQ3-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ3" role="tab" aria-controls="pills-FAQ3" aria-selected="false">FAQ 3</a>
</li>
<li id="pills-FAQ4-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ4" role="tab" aria-controls="pills-FAQ4" aria-selected="false">FAQ 4</a>
</li>
<li id="pills-FAQ5-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ5" role="tab" aria-controls="pills-FAQ5" aria-selected="false">FAQ 5</a>
</li>
<li id="pills-FAQ6-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ6" role="tab" aria-controls="pills-FAQ6" aria-selected="false">FAQ 6</a>
</li>
<li id="pills-FAQ7-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ7" role="tab" aria-controls="pills-FAQ7" aria-selected="false">FAQ 7</a>
</li>
<li id="pills-FAQ8-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ8" role="tab" aria-controls="pills-FAQ8" aria-selected="false">FAQ 8</a>
</li>
<li id="pills-FAQ9-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ9" role="tab" aria-controls="pills-FAQ9" aria-selected="false">FAQ 9</a>
</li>
<li id="pills-requestCallBack-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-request" role="tab" aria-controls="pills-requestCallBack" aria-selected="false">Request Callback</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-contact" role="tabpanel" aria-labelledby="pills-contactDetails-tab">1</div>
<div class="tab-pane fade" id="pills-FAQ1" role="tabpanel" aria-labelledby="pills-FAQ1-tab">2</div>
<div class="tab-pane fade" id="pills-FAQ2" role="tabpanel" aria-labelledby="pills-FAQ2-tab">3</div>
<div class="tab-pane fade" id="pills-FAQ3" role="tabpanel" aria-labelledby="pills-FAQ3-tab">4</div>
<div class="tab-pane fade" id="pills-FAQ4" role="tabpanel" aria-labelledby="pills-FAQ4-tab">5</div>
<div class="tab-pane fade" id="pills-FAQ5" role="tabpanel" aria-labelledby="pills-FAQ5-tab">6</div>
<div class="tab-pane fade" id="pills-FAQ6" role="tabpanel" aria-labelledby="pills-FAQ6-tab">7</div>
<div class="tab-pane fade" id="pills-FAQ7" role="tabpanel" aria-labelledby="pills-FAQ7-tab">8</div>
<div class="tab-pane fade" id="pills-FAQ8" role="tabpanel" aria-labelledby="pills-FAQ8-tab">9</div>
<div class="tab-pane fade" id="pills-FAQ9" role="tabpanel" aria-labelledby="pills-FAQ9-tab">10</div>
<div class="tab-pane fade" id="pills-request" role="tabpanel" aria-labelledby="pills-requestCallBack-tab">11</div>
</div>
</div>
$(document).ready(function () {
$(".nav-item").click(progress());
});
function steps() {
const element = document.getElementById("#progressbar");
if ($("pills-contactDetails-tab").hasClass(".active")) {
element.style.width = "0%";
}
else if ($("#pills-FAQ1-tab").hasClass(".active")) {
element.style.width = "9.1%";
}
else if ($("#pills-FAQ2-tab").hasClass(".active")) {
element.style.width ="18.2%";
}
else if ($("#pills-FAQ3-tab").hasClass(".active")) {
element.style.width ="27.3%";
}
}
So you would use the show event on the tabs to make the progress bar change. also the element variable was null because it had '#progressbar' instead of 'progressbar'. The below example should run fine for you.
I would suggest to change the if elseif elseif in to a switch statement later.
$(document).ready(function() {
// $(".nav-item").click(progress());
$(".nav-link[data-toggle=pill]").on('shown.bs.tab', function(e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
var activeTabId = $(e.target).parent().attr('id');
console.log(activeTabId);
var element = document.getElementById("progressbar");
if (activeTabId == "pills-contactDetails-tab") {
element.style.width = "0%";
} else if ( activeTabId == "pills-FAQ1-tab") {
element.style.width = "9.1%";
} else if (activeTabId == "pills-FAQ2-tab") {
element.style.width = "18.2%";
} else if (activeTabId == "pills-FAQ3-tab") {
element.style.width = "27.3%";
}
})
});
function steps() {
const element = document.getElementById("#progressbar");
if ($("pills-contactDetails-tab").hasClass(".active")) {
element.style.width = "0%";
} else if ($("#pills-FAQ1-tab").hasClass(".active")) {
element.style.width = "9.1%";
} else if ($("#pills-FAQ2-tab").hasClass(".active")) {
element.style.width = "18.2%";
} else if ($("#pills-FAQ3-tab").hasClass(".active")) {
element.style.width = "27.3%";
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="progress">
<div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:10%">
</div>
</div>
<div id="tabs" class="container">
<!-- TABS -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li id="pills-contactDetails-tab" class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="true">Contact Details</a>
</li>
<li id="pills-FAQ1-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ1" role="tab" aria-controls="pills-FAQ1" aria-selected="false">FAQ 1</a>
</li>
<li id="pills-FAQ2-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ2" role="tab" aria-controls="pills-FAQ2" aria-selected="false">FAQ 2</a>
</li>
<li id="pills-FAQ3-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ3" role="tab" aria-controls="pills-FAQ3" aria-selected="false">FAQ 3</a>
</li>
<li id="pills-FAQ4-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ4" role="tab" aria-controls="pills-FAQ4" aria-selected="false">FAQ 4</a>
</li>
<li id="pills-FAQ5-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ5" role="tab" aria-controls="pills-FAQ5" aria-selected="false">FAQ 5</a>
</li>
<li id="pills-FAQ6-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ6" role="tab" aria-controls="pills-FAQ6" aria-selected="false">FAQ 6</a>
</li>
<li id="pills-FAQ7-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ7" role="tab" aria-controls="pills-FAQ7" aria-selected="false">FAQ 7</a>
</li>
<li id="pills-FAQ8-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ8" role="tab" aria-controls="pills-FAQ8" aria-selected="false">FAQ 8</a>
</li>
<li id="pills-FAQ9-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-FAQ9" role="tab" aria-controls="pills-FAQ9" aria-selected="false">FAQ 9</a>
</li>
<li id="pills-requestCallBack-tab" class="nav-item">
<a class="nav-link" data-toggle="pill" href="#pills-request" role="tab" aria-controls="pills-requestCallBack" aria-selected="false">Request Callback</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-contact" role="tabpanel" aria-labelledby="pills-contactDetails-tab">1</div>
<div class="tab-pane fade" id="pills-FAQ1" role="tabpanel" aria-labelledby="pills-FAQ1-tab">2</div>
<div class="tab-pane fade" id="pills-FAQ2" role="tabpanel" aria-labelledby="pills-FAQ2-tab">3</div>
<div class="tab-pane fade" id="pills-FAQ3" role="tabpanel" aria-labelledby="pills-FAQ3-tab">4</div>
<div class="tab-pane fade" id="pills-FAQ4" role="tabpanel" aria-labelledby="pills-FAQ4-tab">5</div>
<div class="tab-pane fade" id="pills-FAQ5" role="tabpanel" aria-labelledby="pills-FAQ5-tab">6</div>
<div class="tab-pane fade" id="pills-FAQ6" role="tabpanel" aria-labelledby="pills-FAQ6-tab">7</div>
<div class="tab-pane fade" id="pills-FAQ7" role="tabpanel" aria-labelledby="pills-FAQ7-tab">8</div>
<div class="tab-pane fade" id="pills-FAQ8" role="tabpanel" aria-labelledby="pills-FAQ8-tab">9</div>
<div class="tab-pane fade" id="pills-FAQ9" role="tabpanel" aria-labelledby="pills-FAQ9-tab">10</div>
<div class="tab-pane fade" id="pills-request" role="tabpanel" aria-labelledby="pills-requestCallBack-tab">11</div>
</div>
</div>
I'd like to activate a tab when a specific link clicked.
This is the code sniopet from bootstrap.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>
I tried using jquery:
$(".tab-pane").removeClass("show active");
$("#" + activeTab).addClass("show active");
but it doesn't work at all, any help?
thanks
I have got the basic tab of bootstrap and i want when i change the tab menu the content (tab-pane) should animate like bootstrap collapse does( slide down/slide up)
Is it possible ?
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">This Is good</div>
<div class="tab-pane" id="profile" role="tabpanel">This is better</div>
<div class="tab-pane" id="messages" role="tabpanel">Thhis is excellent </div>
<div class="tab-pane" id="settings" role="tabpanel">This is poor</div>
</div>
I'm running out of idea so please help me i know it's a silly question.
Here is the EXAMPLE
First download animate.css and add it to code. Lastly give class to tab-content
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active animated bounceInDown" id="home" role="tabpanel">This Is good</div>
<div class="tab-pane animated bounceInDown" id="profile" role="tabpanel">This is better</div>
<div class="tab-pane animated bounceInDown" id="messages" role="tabpanel">Thhis is excellent </div>
<div class="tab-pane animated bounceInDown" id="settings" role="tabpanel">This is poor</div>
</div>
Please try this. I have added some js for sliding effect.
$('.tabs').on('show.bs.tab', function (e) {
if (e.relatedTarget === undefined) {
$($(e.target).attr('href')).slideDown('slow');
}
else {
$($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,
done: function() {
$($(e.target).attr('href')).slideDown('slow');
}
});
}
});
.tab-pane{
background:#ccc;
padding:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="tabs">
<ul class="nav" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" style="display: block;"><p>This Is good</p></div>
<div class="tab-pane " id="profile" role="tabpanel" style="display: none;"><p>This is better</p></div>
<div class="tab-pane " id="messages" role="tabpanel" style="display: none;"><p>Thhis is excellent</p></div>
<div class="tab-pane " id="settings" role="tabpanel" style="display: none;"><p>This is poor</p></div>
</div>
</div>
What about that :
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$($(e.target).attr('href')).hide()
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$($(e.target).attr('href')).slideDown()
})