HTML CSS JS

<article>
  <h1>Sticky TOC in an article</h1>
  <nav class="toc" aria-labelledby="toc-heading">
    <header>
      <h2 id="toc-heading">Table of Contents</h2>
      <button aria-expanded="true" aria-controls="toc-list">Show</button>
    </header>
    <ol id="toc-list" class="hide">
      <li class="toc-entry toc-h2">
        <a href="#how-do-i-use-shortcuts">How do I use shortcuts?</a>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#how-to-add-and-modify-keybindings">How to add and modify keybindings</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#what-is-the-when-clause">What is the when clause?</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#how-to-avoid-and-fix-conflicts">How to avoid and fix conflicts</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-panels">Keybindings for panels</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#navigate-to-next-panel-view">Navigate to next panel view</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-markdown">Keybindings for Markdown</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#toggle-inline-elements-image-linketc">Toggle inline elements (image, link..etc)</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#toggle-block-elements">Toggle block elements</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#toggle-headings">Toggle headings</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#extended-syntax">Extended syntax</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#avoid-a-clash-with-the-view-toggle-side-bar-visibility-command">Avoid a clash with the “View: Toggle Side Bar Visibility”
              command</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-file-management">Keybindings for file management</a>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#keybindings-for-the-terminal">Keybindings for the terminal</a>
        <ol>
          <li class="toc-entry toc-h3">
            <a href="#simplify-opening-a-new-terminal-pane">Simplify opening a new terminal pane</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#close-any-terminal-instance">Close any terminal instance</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#simplify-paste">Simplify paste</a>
          </li>
          <li class="toc-entry toc-h3">
            <a href="#simplify-scrolling">Simplify scrolling</a>
          </li>
        </ol>
      </li>
      <li class="toc-entry toc-h2">
        <a href="#final-word">Final word</a>
      </li>
    </ol>
  </nav>
  <div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ipsum
      voluptatibus porro dicta eos cupiditate minus accusantium quod, eum, dolores
      neque delectus harum nulla ea nesciunt eaque corporis? Repudiandae,
      explicabo.
    </p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia fugiat
      eveniet, earum iusto ut distinctio maiores! Earum est id minima odio
      temporibus dolorem consequatur iste dicta cumque repudiandae. Aliquid,
      iusto?
    </p>
    <h2 id="how-do-i-use-shortcuts">How do I use shortcuts?</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi,
      exercitationem culpa necessitatibus error quidem veritatis minus sunt
      ratione id temporibus accusamus ea ducimus! Tempora sit repellat distinctio
      atque sapiente ut?
    </p>
    <p>
      Molestiae fugiat debitis dolores laborum possimus sapiente fugit! Rem natus
      eum nisi pariatur ut, alias maiores molestias ratione accusamus aspernatur
      esse soluta, ipsam vel tempora nobis provident fugiat ea deleniti?
    </p>
    <h2 id="how-to-add-and-modify-keybindings">
      How to add and modify keybindings
    </h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam fuga alias
      quia voluptate asperiores tempora sequi nobis quod quam consequatur culpa
      corporis expedita error, mollitia id aut accusamus beatae incidunt.
    </p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, tenetur
      dignissimos? Consectetur eaque, quasi illum blanditiis, ab doloremque
      mollitia dolorum, aspernatur dolor omnis tempora corporis quam aut alias id
      similique?
    </p>
    <h3 id="what-is-the-when-clause">
      What is the
      <code class="language-plaintext highlighter-rouge">when</code> clause?
    </h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem nam cum
      ab pariatur harum dolores, voluptates blanditiis sunt saepe fugiat maxime
      itaque et provident necessitatibus reiciendis accusantium iste doloribus.
      Incidunt.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quisquam
      possimus veritatis quam quod quo dolore est adipisci inventore, nihil
      debitis laudantium similique temporibus corrupti. Voluptatem distinctio
      numquam perspiciatis quas!
    </p>
    <h3 id="how-to-avoid-and-fix-conflicts">How to avoid and fix conflicts</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio facilis error
      omnis voluptatum modi debitis iure cumque culpa sint obcaecati nam ducimus
      iste repudiandae aliquam, laboriosam ipsa, nulla, quam provident!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod velit modi
      consequatur libero minus dicta, ut alias blanditiis reprehenderit nisi ex
      qui, debitis, expedita non ipsa dolorem corporis labore cum!
    </p>
    <h2 id="keybindings-for-panels">Keybindings for panels</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem
      maxime vitae optio dicta sapiente voluptates placeat aliquam sed suscipit,
      aut maiores nam voluptate odio, facilis neque aperiam ipsa laboriosam!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aut dolore
      deserunt fugit eaque molestiae, ipsam nam suscipit dignissimos inventore
      iure qui nulla vel quaerat in fuga? Voluptatem, natus fugit?
    </p>
    <h3 id="navigate-to-next-panel-view">Navigate to next panel view</h3>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit non
      vitae, et maxime corporis est aliquam eius quia sunt ipsum beatae id
      quisquam. Sed aliquid, quos enim fugit illum odit.
    </p>
    <h2 id="keybindings-for-markdown">Keybindings for Markdown</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione similique,
      repellat odio inventore, laudantium accusamus molestiae in optio quos ipsam,
      est hic culpa officiis! Aperiam quibusdam dolore soluta. Ipsa, harum.
    </p>
    <h3 id="toggle-inline-elements-image-linketc">
      Toggle inline elements (image, link..etc)
    </h3>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam error
      praesentium quidem, culpa, magni deleniti omnis illo a eveniet reiciendis
      quis quisquam unde, repudiandae quaerat? Magnam minus laboriosam maiores
      vel.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis vitae
      cumque accusamus, rem, porro odit inventore pariatur eligendi, dolorum optio
      culpa! Exercitationem maxime libero sunt minus mollitia facere! Nobis,
      totam?
    </p>
    <h3 id="toggle-block-elements">Toggle block elements</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, quasi.
      Architecto esse assumenda autem ab est? Doloribus debitis eaque
      necessitatibus ipsam, ratione est illum odit cupiditate maxime quaerat
      nihil. Ad!
    </p>
    <h3 id="toggle-headings">Toggle headings</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut odio
      reprehenderit dignissimos iste deserunt, tempora delectus amet est nobis
      repellendus culpa provident accusantium veniam, at minus ipsam ipsa. Nulla,
      voluptatem.
    </p>
    <h3 id="extended-syntax">Extended syntax</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ea, quae
      eveniet vitae fugit eum hic voluptate beatae unde! Placeat voluptate cumque
      perspiciatis eaque eum aliquid ipsam, dolore adipisci est!
    </p>
    <h3 id="avoid-a-clash-with-the-view-toggle-side-bar-visibility-command">
      Avoid a clash with the “View: Toggle Side Bar Visibility” command
    </h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit velit
      aperiam molestias animi, fugit vel accusantium alias odit minus ex
      voluptates eveniet tenetur veniam laborum aliquid facere veritatis suscipit
      eligendi?
    </p>
    <h2 id="keybindings-for-file-management">Keybindings for file management</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae
      aspernatur quaerat autem rerum corporis, vel nemo, dolore eligendi unde
      saepe minus soluta perspiciatis! Unde deserunt iusto nihil nisi odit
      accusamus!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet explicabo
      ipsam aperiam maxime nisi quam! Culpa eaque, temporibus cumque tenetur ipsam
      aliquam quo maiores iure, dolores ipsum iusto aliquid nostrum.
    </p>
    <h2 id="keybindings-for-the-terminal">Keybindings for the terminal</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
      molestias unde explicabo eaque. Fuga commodi voluptates quas, quo numquam
      culpa sint libero neque saepe placeat, dolorem temporibus nam eveniet
      laboriosam.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti vel
      molestias ratione aliquam a alias at maxime minus, voluptas numquam atque
      similique consectetur, quis, ducimus voluptatibus laboriosam architecto
      optio aspernatur.
    </p>
    <h3 id="simplify-opening-a-new-terminal-pane">
      Simplify opening a new terminal pane
    </h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa in doloribus
      quas aliquam odio quis quidem iure maiores distinctio architecto quo, earum
      saepe eius, velit impedit ducimus voluptate! Voluptas, corporis!
    </p>
    <h3 id="close-any-terminal-instance">Close any terminal instance</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit asperiores
      ipsam excepturi, deleniti beatae labore quidem cum repudiandae, laboriosam
      ullam impedit! Ullam corporis nobis facere fugiat repudiandae laboriosam
      iusto atque!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste molestias
      pariatur, explicabo libero soluta dicta, amet qui sunt optio numquam
      doloribus ducimus dolorem ipsum iusto vel suscipit! Nihil, quae harum!
    </p>
    <h3 id="simplify-paste">Simplify paste</h3>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam magnam
      reiciendis cupiditate beatae corporis unde quaerat numquam, animi saepe
      aspernatur debitis facilis sapiente ipsa perspiciatis possimus ab veritatis
      eaque maiores!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, modi,
      perspiciatis, fuga quo qui adipisci reiciendis neque quidem pariatur
      sapiente incidunt non. Maxime aut voluptatum, culpa nisi assumenda ab
      reprehenderit!
    </p>
    <h3 id="simplify-scrolling">Simplify scrolling</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas iusto
      reprehenderit nemo qui alias odit nam quam dolorum, eius magni architecto
      consequuntur libero enim odio numquam et necessitatibus iure. Mollitia!
    </p>
    <h2 id="final-word">Final word</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia officia
      sit nemo ex laudantium velit expedita, soluta blanditiis tempore libero,
      eligendi magnam rerum enim placeat quod quasi praesentium et voluptatibus!
    </p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem a, temporibus
      doloremque natus saepe repellendus quam dicta odio reprehenderit cupiditate
      eveniet maxime molestias doloribus omnis voluptatem beatae, sapiente,
      obcaecati consectetur.
    </p>
  </div>
</article>

.toc {
    position: sticky;
    top: 2px;

    display: flex;
    flex-direction: column;
    align-items: center;

    height: fit-content;

    border-radius: 5px;

    background-color: #fffff9;
    border: 1px solid lightgrey;

    padding: 1rem;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 0 6px rgba(0, 0, 0, 0.15);
  }

  .toc h2,
  .toc ol {
    margin: 0;
  }

  .toc a {
    text-decoration: none;
    color: hsl(193, 46%, 39%);
  }

  .toc header {
    display: flex;
    align-items: center;
    column-gap: 10px;
    line-height: 1;
  }

  .toc button {
    border: 1px solid lightgrey;
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 4px;
    font-size: 1rem;
  }

  /* custom numbering of list items */
  .toc ol {
    margin: 0;
    counter-reset: toc-counter;
    list-style-type: none;

    padding-inline-start: 2rem;
  }

  .toc > ol {
    padding: 0;
    margin-block-start: 1rem;
  }

  .toc li::before {
    content: counters(toc-counter, ".") " ";
    /* Combines the values of all instances by a period */

    counter-increment: toc-counter;
    /* Increments only this instance of the toc-counter counter */

    color: hsl(14, 51%, 54%);
  }

  /* general styles */
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: "Open Sans", sans-serif;
    margin: 1rem 0;
    display: grid;
    justify-content: center;

    background-color: white;
  }

  article {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  p {
    margin: 1rem 0;
  }

  .hide {
    display: none;
  }

  h1 {
    text-align: center;
  }

  code {
    font-size: 1.3rem;
  }

const button = document.querySelector(".toc button");
  const content = document.querySelector("#toc-list");

  button.addEventListener("click", toggleTableOfContents);

  function toggleTableOfContents() {
    content.classList.toggle("hide");

    if (button.innerText === "Hide") {
      button.innerText = "Show";
      button.setAttribute("aria-expanded", false);
    } else {
      button.innerText = "Hide";
      button.setAttribute("aria-expanded", true);
    }
  }