SCR28Usar un menú expandible y contraíble para evitar bloques de contenido

Mostrar y ocultar un índice de contenidos

El índice de contenidos de un conjunto de páginas web se repite cerca del principio de cada página web. Un botón situado al principio del índice permite al usuario eliminarlo de la página o restaurarlo.

...
<script>
let tocToggle = document.querySelector(".toc-toggle");
let toc = document.querySelector("#toc");
tocToggle.addEventListener("click", toggle, false);
function toggle(e){
  let elm = e.currentTarget;
  if(elm.getAttribute("aria-expanded") === "false"){
    elm.setAttribute("aria-expanded", "true");
  }
  else{
    elm.setAttribute("aria-expanded", "false");
  }
}
</script>
...
<button aria-controls="toc" aria-expanded="true" class="toc-toggle" type="button">
  Toggle Table Of Contents
</button>
<nav aria-labelledby="toc-header" id="toc">
  <h2 id="toc-header">Table of Contents</h2>
  <ul>
    <li><a href="#sec1">Section 1</a></li>
    <li><a href="#sec2">Section 2</a></li>
    <li><a href="#sec3">Section 3</a></li>
    <li><a href="#sec4">Section 4</a></li>
  </ul>
</nav>
...

Ejemplo práctico de este código: Mostrar y ocultar un índice de contenidos con un botón.