Creé un botón que ve los elementos que están ocultos al hacer clic, pero hay muchos div con la misma identificación, pero quiero ocultarlos todos, pero solo está ocultando uno que estoy usando debajo del código, pero solo está viendo u ocultando, el primer div solo se oculta al hacer clic descansa no se esconde
<button onclick="myFunction()" class="btn-custom">View the Picture</button> <div id=hide></div> <div id=hide></div> <div id=hide></div> <div id=hide></div> <script> function myFunction() { var x = document.getElementById("hide"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>Su HTML no es válido: los id deben ser únicos.
En su lugar, use una clase para identificar los elementos y querySelectorAll para seleccionarlos todos:
<div class=hide>a</div> <div class=hide>b</div> <div class=hide>c</div> <div class=hide>d</div> <button onclick="myFunction()">Toggle</button> <script> function myFunction() { var x = document.querySelectorAll(".hide"); x.forEach(y => { if (y.style.display === "none") { y.style.display = "block"; } else { y.style.display = "none"; } }) } </script>