Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Hidden/Visible Attribute + Toggle Switches

Posted by: fllwxDumbian Jan 2 2022, 03:10 AM

Hello, so i've once again, this time i have a different problem. As i said in description i'm trying to make a pop up settings menu, but when i click settings again (to close it) the toggle switches disappear stage-like

-> ABC -> AB -> A -> (nothing)

I'm not sure where is the problem, if its in the style of buttons or the fact that i use visible/hidden and not display: none, or any other factor i'm not aware of.
<script>
function bclick() {
if (document.getElementById('t1').style.visibility === "hidden") {

document.getElementById('t1').style.visibility="visible";
document.getElementById('t2').style.visibility="visible";
document.getElementById('s1').style.visibility="visible";
document.getElementById('s2').style.visibility="visible";
document.getElementById('s3').style.visibility="visible";
document.getElementById('t3').style.visibility="visible";
}
else
{
document.getElementById('t1').style.visibility="hidden";
document.getElementById('t2').style.visibility="hidden";
document.getElementById('s1').style.visibility="hidden";
document.getElementById('s2').style.visibility="hidden";
document.getElementById('s3').style.visibility="hidden";
document.getElementById('t3').style.visibility="hidden";
}
}
</script>
(visible/hidden)

<label class="switch" style="visibility: hidden; position: absolute; top: 75px; left: 170px;" id="s1">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="visibility: hidden; position: absolute; top: 125px; left: 170px;" id="s2">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="visibility: hidden; position: absolute; top: 175px; left: 170px;" id="s3">
<input type="checkbox">
<span class="slider round"></span>
</label>
(actual switches)
and the design is a bit too long...

Posted by: fllwxDumbian Jan 2 2022, 06:33 AM

Never mind, i found out why, its cause I had transition time set to 0.4s which caused it to disappear later!! Does anyone know, how to keep the transition time and still make it go away the same speed like the rest? I thought of setting all of the transition times to 0.4 or make the function set toggle switch's TT to 0.0

(Those are my two ideas I'm open to any better one)