Expand All Collapse All Button on a Page

Question

I want to create a Expand All, Collapse All button for my accordion. I would like the button at the top above the plus sign. On clicking Expand all it should expand all sections and vice versa for Collapse all.

I am not much of a coder but surely would appreciate any help.

Thanks in advance. Looking forward for your help

Here is the code.

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }

 .accordion { background-color:#eee; color: #444; cursor: pointer; padding: 8px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } .active.accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; } .accordion:after { content: '\\02795'; /* Unicode character for "plus" sign (+) */ font-size: 13px; color: #777; float: right; margin-left: 5px; } .active:after { content: "\\2796"; /* Unicode character for "minus" sign (-) */ } .panel ul, li {line-height: 0.5};

 <button class="accordion">'test1'</button> <div class="panel"> <p> <b>"Description :";<br/><br/> </b> "test 1.";<br/><br/> <b>"DB :";<br/><br/> </b> "test,\  \  \  tes, \  \  \  test ";<br/><br/> <b>"Query:";<br/><br/> </b> "test;";<br/><br/> <b>"Additional Information:";<br/><br/> </b> "test.";<br/><br/> </p> </div> <button class="accordion">'test1'</button> <div class="panel"> <p> <b>"Description :";<br/><br/> </b> "test 1.";<br/><br/> <b>"DB :";<br/><br/> </b> "test,\  \  \  tes, \  \  \  test ";<br/><br/> <b>"Query:";<br/><br/> </b> "test;";<br/><br/> <b>"Additional Information:";<br/><br/> </b> "test.";<br/><br/> </p> </div>

Answer 1

Code to expand all

document.querySelectorAll('.panel').forEach(node => node.style.display='block')
document.querySelectorAll('.accordion').forEach(node => node.classList.add('active'))

Code to collapse all

document.querySelectorAll('.panel').forEach(node => node.style.display='none')
document.querySelectorAll('.accordion').forEach(node => node.classList.remove('active'))