In a previous question, I asked how to achieve something like this:
Where clicking any tab would reveal the contents of said tab and keep those of other tabs hidden. @BradleyCoupland suggested the following code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a></li>
<li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane tabcontent active">
<br>
<table>
<tbody>
<tr>
<td>
<div class="column" style="padding-left: 80px">
[Contents of col 1 of tab 1]
</div>
</td>
<td>
<div class="column" style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="Cspoiler" class="tab-pane tabcontent">
<br>
<table>
<tbody>
<tr>
<td>
<div class="column" style="padding-left: 80px">
[Contents of col 1 of tab 2]
</div>
</td>
<td>
<div class="column" style="padding-left: 80px">
[Contents of col 2 of tab 2]
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
function openPage(pageName) {
var i, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(pageName).style.display = "block";
}
document.getElementById("defaultOpen").click();
</script>
And it worked like a charm. But suppose I now want to do multiple independent sets of tabs, like this:
I tried just copy-pasting the <ul> part twice, and the result was that the second set of tabs showed nothing on loading, and clicking on a tab in any tab set would do the right thing in its set, but hide all the tabs of the other set as well. For example, clicking on "weird-meter older reconstruction" would show what you see in the image for that tab, but hide the contents of the "P.Oxy. version" tab below. Simplifying the code above to a minimal example:
<div style="text-align: justify">Intro</div>
<br>
<br>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a></li>
<li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane tabcontent"><br>
Pefanthi
</div>
<div id="Cspoiler" class="tab-pane tabcontent"><br>
Abanthi
</div>
<br>
<br>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Vspoiler2" id="defaultOpen" onclick="openPage('Vspoiler2')">Vulgate version</a></li>
<li><a data-toggle="tab" href="#Cspoiler2" onclick="openPage('Cspoiler2')">Campbell version</a></li>
</ul>
<div id="Vspoiler2" class="tab-pane tabcontent"><br>
Pefanthi
</div>
<div id="Cspoiler2" class="tab-pane tabcontent"><br>
Abanthi
</div>
<br>
<br>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function openPage(pageName) {
var i, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
document.getElementById(pageName).style.display = "block";
}
document.getElementById("defaultOpen").click();
</script>
Which loads to this:
And where clicking the lower "Vulgate version" tab produces this:
Now the obvious solution to this problem is to duplicate the script, by making an otherwise identical function openPage2 which appends a 2 to everything it works with, and then use openPage2, tabcontent2 and defaultOpen2 for the second set of tabs and the no-2 versions for the first one. Now suppose you have more than 2 sets. Say you have 10. 10 scripts? Surely there must be a less clumsy way of fixing this problem? I was thinking maybe one could set a variable to store the number of tabs and then make a script with a for loop that would result in running all the openPage<x> scripts at the right time by writing a single script, but I'm not sure how to go about this.
Any suggestions?
