Как сделать что бы блоки появлялись и пропадали по нажатию кнопки

Frontend developer JavaScript
1

Дали такое задание на курсах, подскажите пожалуйста как это можно осуществить по структуре)

2

Вот есть такой вариант:


<button class='opb'>open blocks
<button class='cls'>close blocks

<div class='n1 block'>block 1
<div class='n1 block'>block 2
<div class='n1 block'>block 3

.block {

    width: 100px;

    height: 100px;

    background: black;

    margin: 10px;

}



.n1 {

    visibility: hidden;

}

var opb = document.querySelector('.opb');

opb.onclick = e => {

    var n1 = document.querySelectorAll('.n1').forEach(n => n.style.visibility = 'visible');

};

if (localStorage.getItem('an') == 1) opb.click();



var cls = document.querySelector('.cls');

cls.onclick = e => {

    var n1 =document.querySelectorAll('.n1').forEach(n => n.style.visibility = 'hidden');

}