Estoy tratando de hacer que esta función cambie la visualización al div "activo" en el primer clic y luego vuelva a "Seguro" en el segundo clic.
Actualmente, no cambia a "activo" hasta el segundo clic del botón, luego gira de un lado a otro como debería.
¿Por qué se necesitan 2 clics inicialmente? ¿Cómo hago para que funcione con el primer clic del botón?
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>Su enfoque es bastante engorroso para lo que creo que se supone que debe hacer. De hecho, si su único objetivo es alternar la visibilidad de los elementos con solo 2 estados posibles: activado o desactivado, entonces puede hacerlo sin javascript, utilizando una casilla de verificación oculta y en función de su visualización de estado u ocultar ciertos hermanos a través de 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>