I am simply following the bootstrap documentation for tabs in this link
https://getbootstrap.com/docs/5.2/components/navs-tabs/#tabs
From the documentation, I copied the sample implementation and implement it to my code like this
---
title: Portfolio
description: Portfolio
---
{% extends "./layouts/layout.njk" %}
{% block scripts %}{% endblock %}
{% block styles %}{% endblock %}
{% block body %}
<div class="demo py-5">
<h2 class="my-5">Choose One of Our Demos</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">A</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">B</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">C</div>
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">D</div>
</div>
</div>
{% endblock %}
It's being displayed properly but seems like nothing is happening when I click the tabs. It won't switch and display the correct content. It always just display "A" since that is the active tab set initially.
I am really not sure what I'm missing here. Bootstrap 5 is definitely installed. I'm thinking though does this something to do with nunjucks? Do I need to put a script somewhere, I'm also not sure where javascript codes should be put, when using nunjucks. Thanks of any help.
The code above works as expected IF you include Bootstrap CSS and JS correctly. I guess the problem is that you didn't include Bootstrap JS or you did, but not properly.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="demo py-5">
<h2 class="my-5">Choose One of Our Demos</h2>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">A</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">B</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">C</div>
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">D</div>
</div>
</div>
Related
I have code consisting of three identical blocks, each with at least two nav and one tab-content. The problem is that I can't make it so that when I click on an item to deselect the active item in the other list
I found a similar solution for bootstrap 3, but I can't translate it correctly for bootstrap 5, I'm not good with scripts.
bootstrap multiple nav tabs for tab content
another solution for BS3
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js"></script>
<div class="MyTabPillsOne">
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 1</strong></h6>
</div>
<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-3" aria-selected="true">1</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-3" aria-selected="false">2</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-3" type="button" role="tab" aria-controls="tab-3" aria-selected="false">3</button>
</div>
<div class="hr-text hr-text-left m-t-2 m-b-1">
<h6><strong>List 2</strong></h6>
</div>
<div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<button class="nav-link " data-bs-toggle="pill" data-bs-target="#tab-a" type="button" role="tab" aria-controls="tab-a" aria-selected="false">a</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-b" type="button" role="tab" aria-controls="tab-b" aria-selected="false">b</button>
<button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-c" type="button" role="tab" aria-controls="tab-c" aria-selected="false">c</button>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab-1">
<h1>1</h1>
</div>
<div class="tab-pane" id="tab-2">
<h1>2</h1>
</div>
<div class="tab-pane" id="tab-3">
<h1>3</h1>
</div>
<div class="tab-pane" id="tab-a">
<h1>A</h1>
</div>
<div class="tab-pane" id="tab-b">
<h1>B</h1>
</div>
<div class="tab-pane" id="tab-c">
<h1>C</h1>
</div>
</div>
</div>
After reading documentation, I wrote this script:
function selectorFlow(selector) {
document
.querySelectorAll(
"." + selector + ' .nav-link[data-bs-toggle="pill"]'
)
.forEach((t, i) => {
t.addEventListener("show.bs.tab", function (e) {
var active = document.querySelector(
"." + selector + " .nav-link.active"
);
active.classList.remove("active");
});
});
}
selectorFlow("MyTabPillsOne");
selectorFlow("MyTabPillsTwo");
selectorFlow("MyTabPillsThree");
The solution is not ideal, but the deadline was tight.
Here is my solution for bootstrap#5.2.3
$('.nav-pills button').click(function() {
var $selector = $('.nav-pills button[data-bs-target="' + $(this).attr("data-bs-target") + '"]').not(this);
var nav = $selector.closest('.nav-pills');
nav.find('button').removeClass("active");
$selector.addClass("active");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</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" tabindex="0">Content 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Content 2</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Content 3</div>
</div>
<br/>
<ul class="nav nav-pills mb-3" id="pills-tab2" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
</ul>
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 have implemented tab using bootstrap, there are 3 tabs and each of them has contents in them, but while I am executing the code all the contents of active tab is not visible, content is visible only after any other tab is clicked, when checked on inspect element does not show active class.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</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">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
Content.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content.........
</div>
</div>
in inspect div element only shows three classes (class="tab-pane fade show") but not active class.
#conrad
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
add this script link to your shipify theme.liquid head section
<a class="nav-link active" id="all-tab" data-toggle="tab"
the data toggle need a unique id you do not mention it
you put the same data-toggle change relevant tab id
You need to add active class to li tag and add in class inside first div which you need to display
Demo Code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!--add active to li-->
<li class="nav-item active">
<a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</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">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<!--added class in-->
<div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
Content1.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content2.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content3.........
</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