javascript forEach

HTML

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction('div1')">Try it 1</button>
<button onclick="myFunction('div2')">Try it 2</button>
<button onclick="myFunction('div3')">Try it 3</button>

<div id="div1" class="padrao">
This is my DIV element.
</div>
<div id="div2" class="padrao">
This is my DIV element.
</div>
<div id="div3" class="padrao">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

CSS

.padrao {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

JavaScript

function myFunction(divName) {
	var hideDivs = document.getElementsByClassName("padrao");

	hideDivs.forEach(function(item, i){
    	console.log(item);
    });
    
    var x = document.getElementById(divName);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}