The purpose of this code is to open two different tabs where one tab is nested inside main tab. When user click a link which passes a query string hash values like the following
http://127.0.0.1:5500/products/virtual-machines.html#Get_Started#v-pills-02-tab
I need to open both tabs at once when page loads.Bootstrap 5 is the plugin used for. I tried using the following code.
var hash = location.hash.split('?')[0];
console.log(hash);
if (hash) {
var triggerEl = document.querySelector("#" + hash + '');
triggerEl.click();
}
result
#Get_Started#v-pills-02-tab
I need to slipt in two var
Get_Started
v-pills-02-tab
Your example code is splitting on a question mark (?), which doesn't exist in your hash.
Perhaps you could write your hash as a comma separated list, the first item in the list would be the parent tab element id, and the 2nd item would be the child tab element id, etc.
http://127.0.0.1:5500/products/virtual-machines.html#Get_Started,v-pills-02-tab
Then parse it, splitting on the comma.
// substring out the leading '#'
// and convert the comma-separated items into an array
var tabIds = location.hash.substring(1).split(',');
if(tabIds) {
var $tab = $('#' + tabIds[0]);
// Ensure that the element exists before clicking it
if($tab.length > 0) {
$tab.click();
// Check for subsequent tab-ids
if(tabIds.length > 1) {
var $subTab = $('#' + tabIds[1]);
if($subTab.length > 0) {
$subTab.click();
}
}
}
}
(Sorry if you're allergic to jQuery. It shouldn't be difficult to translate it to vanilla JS.)