Class Toggle Panel - JavaScript Client

A disclosure panel opens when JavaScript toggles a class, updates an ARIA attribute, and changes the label text.

Program

A common client pattern is to keep markup stable and switch state through classes and attributes.

class_toggle_panel.html

<style>.drawer { display: none; } .drawer.open { display: block; background: #eef2ff; }</style>
<button id="toggle">Show details</button>
<section class="drawer" aria-expanded="false"><span class="label">Closed</span></section>
<script>
  const drawer = document.querySelector(".drawer");
  drawer.classList.toggle("open");
  drawer.setAttribute("aria-expanded", "true");
  drawer.querySelector(".label").textContent = "Open";
</script>

classList.toggle classList.toggle adds a class when it is absent and removes it when present.

setAttribute setAttribute writes a DOM attribute value.