I have a slider and I want it when it slides one way it hides all the elements on the page with a classname="siteContainer". When I click it again I want it to display all the elements with the classname="siteContainer"
Because there are many elements I need a loop (which I have). I have managed to make all the elements visible but been unable to make the visible again.
The elements are not contiguous so cannot be grouped into one div with one ID.
It is in codepen https://codepen.io/payling/pen/MRmvwY
and below
<script>
function setDisplay(className, displayValue) {
var items = document.getElementsByClassName(className);
for (var i=0; i < items.length; i++) {
items[i].style.display = displayValue;
}
}
function showsiteContainer() {
setDisplay("siteContainer", "none");
}
</script>
function showsiteContainer() {
var x = document.getElementById("block");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<style>
.siteContainer {
display:flex;
width:40px;
hieght:40px;
color:black;
text-decoration:none;
font-size:13px;
padding:5px;
border-top-color: rgb(133, 130, 130);
border-top-style:dotted;
border-width: 1px;
}
/* SLIDE BUTTON*/
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #EDEDED;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1C77C3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
}
/* Rounded sliders */
.slider.round {
border-radius: 24px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<body>
<div>
<span>DETAILS</span>
<label class="switch">
<input type="checkbox" onclick="showsiteContainer()" >
<span class="slider round"></span>
</label>
</div>
<div>
<div class="siteContainer">an element</div>
<div class="siteContainer">2nd element</div>
</div>
<div class="siteContainer">3rd element</div>
<div class="siteContainer">4th element</div>
</div>
</body>
Have a look at your example with a slight modification, I rewrote your function with :
function showsiteContainer() {
var elements = document.getElementsByClassName("siteContainer");
Array.prototype.forEach.call(elements, function(el) {
if (el.style.display === "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
});
}