I'm trying to get this function to change the display to the "active" div on the first click then back to "Insurance" on the second click.
Currently, it doesn't change to "active" until the second click of the button, then it rotates back and forth as it should.
Why does it take 2 clicks initially? How do I get it to work with the first click of the button?
var timesClicked = 0;
function openDiv(evt, divName, divName2) {
if (name1 === 'Insurance' && timesClicked < 1) {
evt.currentTarget.className += " active";
}
var name1 = divName;
var name2 = divName2;
timesClicked++;
if (name1 !== 'Insurance' && timesClicked > 1) {
// timesClicked = 0;
// openDiv(evt, 'Insurance', 'Insurance2');
// console.log("switch back");
// return;
name1 = 'Insurance';
name2 = 'Insurance2';
evt.currentTarget.className.replace(" active", "");
timesClicked = 0;
}
var i, tabcontent, tabcontent2, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tabcontent2 = document.getElementsByClassName("tabcontent2");
for (i = 0; i < tabcontent2.length; i++) {
tabcontent[i].style.display = "none";
tabcontent2[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(name1).style.display = "block";
document.getElementById(name2).style.display = "block";
if (timesClicked === 1) {
evt.currentTarget.className += " active";
}
}
document.getElementById("defaultOpen").click();<button class="tablinks" onclick="openDiv(event, 'Insurance', 'Insurance2')" id="defaultOpen"></button>
<div class="dw12">
<button class="tablinks" onclick="openDiv(event, 'Retiree-Medical', 'Retiree-Medical2')"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</div>Your approach is quiet cumbersome for what I think it supposed to do. In fact if your only objective is to toggle visibility of elements with only 2 possible states: on or off, than you can do this without any javascript, by utilizing a hidden checkbox and based on it's state display or hide certain siblings via CSS:
#tab1:checked ~ #Retiree-Medical,
#tab1:checked ~ #Retiree-Medical2,
#tab1:not(:checked) ~ #Insurance,
/*note, you can't use #Insurance2 directly because it's not sibling of #tab1*/
#tab1:not(:checked) ~ .some-child #Insurance2,
/*or you can use * to make it more universal */
#tab1:not(:checked) ~ * .tab1toggle.checkedonly,
#tab1:checked ~ * .tab1toggle:not(.checkedonly) {
display: none;
}
label {
user-select: none;
/* prevent text selection on double click */
}
label>button {
pointer-events: none;
}
.div {
display: block;
}
.red {
background-color: pink;
display: inline-block;
}<div class="content">
<!-- must be above any elements it controls -->
<input id="tab1" type="checkbox" checked hidden>
<!-- using label to redirect clicks to the checkbox -->
<label class="dw12 div" for="tab1">
<!-- to prevent this button from capturing clicks we must disable it in css via pointer-events style -->
<button class="tablinks"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</label>
<div id="Insurance">Insurance</div>
<div class="some-child">
<div class="another-child">
<div id="Insurance2">Insurance2</div>
</div>
</div>
<div id="Retiree-Medical">Retiree-Medical</div>
<div id="Retiree-Medical2">Retiree-Medical2</div>
<div class="red">
<div class="tab1toggle checkedonly">generic div1 checked</div>
<div class="tab1toggle checkedonly">generic div2 checked</div>
<div class="tab1toggle checkedonly">generic div3 checked</div>
<div>
<div>
<div>
<div class="tab1toggle checkedonly">generic div4 checked, has multiple parents</div>
</div>
</div>
</div>
<div class="tab1toggle checkedonly">generic div5 checked</div>
<div class="tab1toggle">generic div6</div>
<div class="tab1toggle">generic div7</div>
<div class="tab1toggle">generic div8</div>
<div class="tab1toggle">generic div9</div>
<div class="tab1toggle">generic div10</div>
</div>
</div>