In your approach I think two JS functions are using for hiding/showing the tabs; one for hiding all the tab content div element and another one for showing the needed div element.
I think you can use the following function and associate this function and pass the element id which clicked. Maintain an element ID array inside the function through which you can display and hide the div element. The logic is to display the div element whose ID passed into the function rest of the elements will be hidden.
Code:
function displayTheClickedTab(clickedId){
var tabContentId = ['intro','maintenance','ridetips','tricktips']; //Enter the element ids which is the container of the tabs like the mentioned ones.
if(document.getElementById(clickedId)){
document.getElementById(clickedId).style.display = 'block';
}
for(var i = 0; i < tabContentId.length; i++){
if(tabContentId[i] !== clickedId){
document.getElementById(tabContentId[i]).style.display = 'none';
}
}
}
Hope this helps
Bookmarks