Multiple accordions all with tabs open by default

Question

I have 4 accordions that are all using the same function, I need the first tab on each accordion to be open by default.

I have tried repeating the default open function but it only ever works on the first accordion.

Here's the HTML for two accordions

<div class="service-content w-100" id="service1">
<div class="tab-content-wrapper row">

<div class="tab w-30 ml-100 mp-100">
<div id="tab1-1">
<button class="tablinks" id="defaultOpen" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
</div>
<button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>

<div id="srv1-sub1" class="tab-content w-70 row">
<h3>Sub-Service 1</h3>
</div>

<div id="srv1-sub2" class="tab-content w-70 row">
<h3>Sub-Service 2</h3>
</div>

<div id="srv1-sub3" class="tab-content w-70 row">
<h3>Sub-Service 3</h3>
</div>

</div><!--tab-content-wrapper-->
</div> <!--service1-->


<div class="service-content w-100" id="service2">
<div class="tab-content-wrapper row">

<div class="tab w-30 ml-100 mp-100">
<div id="tab1-1">
<button class="tablinks" id="defaultOpen2" onclick="openSubSvc(event, 'srv2-sub1')" >Sub-Service 1</button>
</div>
<button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv2-sub2')">Sub-Service 2</button>
<button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv2-sub3')">Sub-Service 3</button>
</div>

<div id="srv2-sub1" class="tab-content w-70 row">
<h3>Sub-Service 1</h3>
</div>

<div id="srv2-sub2" class="tab-content w-70 row">
<h3>Sub-Service 2</h3>
</div>

<div id="srv2-sub3" class="tab-content w-70 row">
<h3>Sub-Service 3</h3>
</div>

</div><!--tab-content-wrapper-->
</div> <!--service1-->

Here's the javascript for the tabs:

function openSubSvc(evt, subSvcName) {
var activeClass = evt.target.classList.contains("active")
if(!activeClass){
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(subSvcName).style.display = "block";
evt.currentTarget.className += " active";
} else {
document.getElementById(subSvcName).style.display = "none";
evt.target.classList.remove("active");
}
}

Here's what I'm using to have a tab open by default:

document.getElementById("defaultOpen").click();
document.getElementById("defaultOpen2").click();

Even with different ID's and the repeated line of code, the first tab on the first accordion is the only one that opens by default. Each accordion is in a hidden div, so when it's opened I need the first tab for each accordion to be open by default. I feel like the problem is that all 4 accordions are using the same function? Any help is appreciated

Answer 1

The problem is that you hide all content, regardless of which accordion it belongs to when clicking any button:

tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
}

A simple solution would be to add a class to all members of each accordion, and only hide those elements when clicking on one of the control buttons. A more subtle solution would be to start at the element-to-be-shown, then find its siblings so that you're only targeting elements of the affected accordion. This will make the javascript a bit more complicated, but remove the necessity of changing the markup.

The simple solution is demonstrated below, where I noticed that you sort of already have the idea of accordion groups in the first half of the variable that's passed to the click handlers. I added svc1 to members of the first accordion and svc2 to members of the second, then I replaced the tabcontent declaration with:

tabcontent = document.getElementsByClassName(subSvcName.split("-")[0]);

 function openSubSvc(evt, subSvcName) { var activeClass = evt.target.classList.contains("active") if(!activeClass){ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName(subSvcName.split("-")[0]); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(subSvcName).style.display = "block"; evt.currentTarget.className += " active"; } else { document.getElementById(subSvcName).style.display = "none"; evt.target.classList.remove("active"); } } document.getElementById("defaultOpen").click(); document.getElementById("defaultOpen2").click(); 

 <div class="service-content w-100" id="service1"> <div class="tab-content-wrapper row"> <div class="tab w-30 ml-100 mp-100"> <div id="tab1-1"> <button class="tablinks" id="defaultOpen" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button> </div> <button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button> <button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button> </div> <div id="srv1-sub1" class="tab-content w-70 row srv1"> <h3>Sub-Service 1</h3> </div> <div id="srv1-sub2" class="tab-content w-70 row srv1"> <h3>Sub-Service 2</h3> </div> <div id="srv1-sub3" class="tab-content w-70 row srv1"> <h3>Sub-Service 3</h3> </div> </div><!--tab-content-wrapper--> </div> <!--service1--> <div class="service-content w-100" id="service2"> <div class="tab-content-wrapper row"> <div class="tab w-30 ml-100 mp-100"> <div id="tab1-1"> <button class="tablinks" id="defaultOpen2" onclick="openSubSvc(event, 'srv2-sub1')" >Sub-Service 1</button> </div> <button class="tablinks" id="tab1-2" onclick="openSubSvc(event, 'srv2-sub2')">Sub-Service 2</button> <button class="tablinks" id="tab1-3" onclick="openSubSvc(event, 'srv2-sub3')">Sub-Service 3</button> </div> <div id="srv2-sub1" class="tab-content w-70 row srv2"> <h3>Sub-Service 1</h3> </div> <div id="srv2-sub2" class="tab-content w-70 row srv2"> <h3>Sub-Service 2</h3> </div> <div id="srv2-sub3" class="tab-content w-70 row srv2"> <h3>Sub-Service 3</h3> </div> </div><!--tab-content-wrapper--> </div> <!--service1-->