Build disclosure with details and summary

A project card may contain notes that are useful but not needed at first glance. This is a disclosure problem, and HTML already has a disclosure control: details with a summary as its first summary child.

The browser manages the open state, pointer and keyboard activation, and the relationship between the summary and hidden content. You can set open in the initial HTML, read details.open from JavaScript, and listen for toggle when you need a secondary effect such as remembering a preference.

<details class="task-notes">
  <summary>Implementation notes</summary>
  <p>Confirm the mobile navigation before publishing.</p>
</details>
<script>
  document.querySelector(".task-notes").addEventListener("toggle", event => {
    console.log(event.currentTarget.open ? "open" : "closed")
  })
</script>

Use details for optional information or controls, not as a substitute for tabs, menus, or every expandable design. The meaning matters because assistive software and browser behavior follow the element’s actual contract.

Current HTML also supports a shared name on related details elements to create an exclusive accordion. Opening one closes another. Use that only when comparing two open sections is not important; forced exclusivity can make scanning harder.

Style the component through details[open] and summary. Keep a visible focus indicator, and be careful when replacing the marker because your replacement still needs to communicate the open state. The content remains in the document, which is useful for a readable no-script version.

Add two task-note disclosures and operate them with mouse and keyboard. Log each toggle, then add the same non-empty name to both and verify only one stays open. Remove name if the ability to compare both notes is more useful. Style the summary in its focused and open states, and verify the label still explains the hidden content. If nothing toggles, check that summary is inside details and is its first summary child.