The Principle of Least Power in the Modern Web

<!-- A clickable control the user sees. "id" is a unique name so the script can find this button later. -->
<button id="trigger">expand/ collapse</button>
<!-- The paragraph that will show or hide. It starts with no special "visible" styling. -->
<p id="content" class="">
  Bits of moving fluff laws of physics with pretty stories for which there's
  little good evidence of brilliant syntheses two ghostly white figures in
  coveralls and helmets are softly dancing light years.
</p>
<style>
  /* By default: treat the paragraph as completely hidden (not shown on screen, not laid out). */
  #content {
    display: none;
  }
  /* When the "visible" class is added to the paragraph's class list, show it as normal block text. */
  #content.visible {
    display: block;
  }
</style>
<script>
  // Grab the button and the paragraph from the page using the ids we gave them above.
  var trigger = document.getElementById("trigger");
  var content = document.getElementById("content");

  // When someone clicks the button, run our small function below.
  trigger.addEventListener("click", handleAccordion);

  function handleAccordion() {
    // Flip "visible" class on or off: if it was hidden, show it; if it was shown, hide it.
    content.classList.toggle("visible");
  }
</script>

<!-- Built-in "disclosure" widget: the browser handles open/close for you—no script required. -->
<details>
  <!-- This line is always visible and acts as the clickable heading / toggle. -->
  <summary>expand/ collapse</summary>
  <!-- Everything after summary is the body: shown when open, hidden when closed. -->
  Bits of moving fluff laws of physics with pretty stories for which there's
  little good evidence of brilliant syntheses two ghostly white figures in
  coveralls and helmets are softly dancing light years.
</details>

<!-- Button and text panel again; this time we animate height instead of toggling display on/off. -->
<button id="trigger">expand/ collapse</button>
<p id="content">
  Bits of moving fluff laws of physics with pretty stories for which there's
  little good evidence of brilliant syntheses two ghostly white figures in
  coveralls and helmets are softly dancing light years.
</p>
<style>
  /* Start collapsed: zero height, but keep the text in the document—just clipped out of view. */
  #content {
    height: 0;
    overflow: hidden;
    /* When height changes, animate smoothly over 0.3 seconds instead of jumping. */
    transition: height 0.3s ease;
  }
</style>
<script>
  // Same pattern as before: find the button and the paragraph by their ids.
  var trigger = document.getElementById("trigger");
  var content = document.getElementById("content");
  // Simple flag: are we currently in the "expanded" state?
  var isOpen = false;

  trigger.addEventListener("click", handleAccordion);

  // After a height animation finishes, if we're open, let height become "automatic"
  // so if the text reflows or grows, the box can grow with it (CSS can't animate to "auto" directly).
  content.addEventListener("transitionend", function () {
    if (isOpen) {
      // once expanded, switch to auto so the panel can grow with its content
      content.style.height = "auto";
    }
  });

  function handleAccordion() {
    if (isOpen) {
      // Closing: pin height to the real pixel height first, then animate down to zero.
      // going from auto back to a pixel value, then to 0, with a forced reflow in between
      content.style.height = content.scrollHeight + "px";
      content.offsetHeight; // force reflow
      content.style.height = "0";
      isOpen = false;
    } else {
      // Opening: animate from current height up to however tall the content actually is.
      content.style.height = content.scrollHeight + "px";
      isOpen = true;
    }
  }
</script>

<!-- Same native open/close as before; the extra wrappers exist only so we can animate smoothly. -->
<details>
  <summary>expand/ collapse</summary>
  <!-- Outer shell: its grid row will grow from "nothing" to "full size" for the animation. -->
  <div class="expandable-content">
    <!-- Inner box: holds the text and clips anything that spills while the outer row is still small. -->
    <div class="expandable-content-inner">
      Bits of moving fluff laws of physics with pretty stories for which there's
      little good evidence of brilliant syntheses two ghostly white figures in
      coveralls and helmets are softly dancing light years.
    </div>
  </div>
</details>
<style>
  details::details-content {
    /* disable the content-visibility property as we're taking the visibility of the content into our own hands now */
    content-visibility: visible;
  }
  /* When the details panel is open, give the outer wrapper a "full" row (1 fraction of available space). */
  details[open] .expandable-content {
    grid-template-rows: 1fr;
  }
  .expandable-content {
    /* CSS Grid lets us animate a row from effectively zero height up to the content's natural height. */
    display: grid;
    /* Collapsed: the row is 0 fractional units—tight shut. */
    grid-template-rows: 0fr;
    /* Smoothly change that row size over 0.3s (browsers can interpolate fr values). */
    transition: 0.3s grid-template-rows;
  }
  .expandable-content-inner {
    /* Hide overflow while collapsing so text doesn't peek out mid-animation. */
    overflow: clip;
    /* Allow the grid child to shrink below its content size so 0fr can actually collapse it. */
    min-height: 0;
  }
</style>

<button id="trigger">Show info</button>
<!-- The popover panel. Starts hidden via CSS -->
<div id="popover" role="tooltip" aria-hidden="true">
  This is some extra information that only appears on demand.
</div>
<style>
  #popover {
    display: none;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 9999;
    background: white;
    border: 1px solid;
    padding: 1rem;
  }

  #popover.visible {
    display: block;
  }
</style>

<script>
  var trigger = document.getElementById("trigger");
  var popover = document.getElementById("popover");

  trigger.addEventListener("click", function (e) {
    e.stopPropagation(); // prevent the document click handler from immediately closing it
    var isOpen = popover.classList.toggle("visible");
    // Keep aria in sync with the actual state.
    trigger.setAttribute("aria-expanded", isOpen);
    popover.setAttribute("aria-hidden", !isOpen);
  });

  // Clicking anywhere outside the popover closes it.
  document.addEventListener("click", function (e) {
    if (!popover.contains(e.target)) {
      popover.classList.remove("visible");
      trigger.setAttribute("aria-expanded", "false");
      popover.setAttribute("aria-hidden", "true");
    }
  });
</script>

<!-- Wire the button to the popover by matching popovertarget to the panel's id. That's it. -->
<button popovertarget="my-popover">Show info</button>
<!-- The popover="auto" attribute does all the heavy lifting. -->
<div id="my-popover" popover="auto">
  This is some extra information that only appears on demand.
</div>

:root {
  color-scheme: light dark;
  --background: light-dark(#ffffff, #1a1a1a);
  --foreground: light-dark(#1a1a1a, #ffffff);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

<label for="theme-toggle">
  <input type="checkbox" id="theme-toggle" />
  Toggle theme
</label>
<style>
  :root:has(#theme-toggle:checked) {
    color-scheme: dark;
  }
</style>

const toggle = document.getElementById("theme-toggle");

// On load: restore saved override if there is one
const saved = localStorage.getItem("theme-override");
if (saved !== null) {
  toggle.checked = saved === "true";
} else {
  // No saved preference — mirror whatever the OS is set to
  toggle.checked = window.matchMedia("(prefers-color-scheme: dark)").matches;
}

// On change: save the new state
toggle.addEventListener("change", () =>
  localStorage.setItem("theme-override", toggle.checked),
);