Hidden/Visible Attribute + Toggle Switches, I'm trying to make kind of pop-up panel settings thingy Options

[fllwxDumbian]

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...