<main>
  <article class="product-help">
    <p class="eyebrow">Produktguide</p>
    <h1>Find den rigtige størrelse</h1>
    <p>Skoen er normal i længden, men har en smal pasform.</p>
    <!-- TODO: Tilføj aria-expanded og aria-controls -->
    <button
      class="disclosure-button"
      type="button">
      Tips om pasform
    </button>

    <div class="disclosure-panel" id="fit-tips" hidden>
      <h2>Sådan vælger du</h2>
      <ul>
        <li>Vælg din normale størrelse ved smalle fødder.</li>
        <li>Gå en halv størrelse op, hvis du ønsker mere plads.</li>
        <li>Sammenlign med indersålen i et par, du allerede bruger.</li>
      </ul>
    </div>
  </article>
</main>

const button = document.querySelector(".disclosure-button");
const panel = document.querySelector("#fit-tips");

// Ved et klik:
// 1. Find ud af, om panelet skal åbne.
// 2. Opdatér panel.hidden.
// 3. Opdatér aria-expanded med den samme tilstand.

Preview

Produktguide

Find den rigtige størrelse

Skoen er normal i længden, men har en smal pasform.