I have HTML code

<div id="area" class="wrapper"> <div class="vopros" id="vopros"> <div class="top_strip" id="top_strip"> <div class="meter"> <span id="number"><span><p id="numbq"></p></span></span> </div> <p id="time">00:00</p> </div> <div class="picture"> <img src="img/1.png" id="picture" class="picture"> </div> <p id="question"></p> <div class="line-question" id="line-question" onclick="vari(0)"> <img src="img/button-2.svg" id="pict-1" class="pict" height="20px"> <a class="myButton" id="option1"></a> </div> <div class="line-question" id="line-question" onclick="vari(1)"> <img src="img/button-2.svg" id="pict-2" class="pict" height="20px"> <a class="myButton" id="option2"></a> </div> <div class="line-question" id="line-question" onclick="vari(2)"> <img src="img/button-2.svg" id="pict-3" class="pict" height="20px"> <a class="myButton" id="option3"></a> </div> <div class="line-question" id="line-question-4" onclick="vari(3)"> <img src="img/button-2.svg" id="pict-4" class="pict" height="20px" id="option4"> <a class="myButton" id="option4"></a> </div> <div class="bot-button" id="bot-button"> <a onclick="vari(4)" id="option7" class="option7">Далее</a> <a onclick="vari(8)" id="option8" class="option8">Назад</a> <a onclick="vari(9)" id="option9" class="option9">Завершить</a> </div>

in it all objects are assigned display:none; how can i change it to display:block; all elements inside <div id="area" class="wrapper"> ?

    1 answer 1

     function showAll() { document.querySelectorAll("#area *").forEach( e => e.style.display = "block" ); } 
     #area * { display:none; } 
     <button onclick="showAll()">Show All</button> <div id="area"> <div>Test DIV<span>Test SPAN inside DIV</span></div> <span>Test SPAN</span> </div>