Build disclosure with details and summary

A project card often has notes you do not need on first glance. That is a disclosure problem, and HTML already ships a control for it: details with summary as its first summary child.

The browser owns the open state, pointer and keyboard activation, and the link between the summary and the hidden content. You can set open in the initial HTML, read details.open from JavaScript, and listen for toggle when you want a side effect like saving 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>

Click the summary and the console prints open or closed. No custom open-state variable required.

Use details for optional information or controls. Do not treat it as a drop-in for tabs, menus, or every expandable design. Assistive software and browser behavior follow the element’s real contract, not your visual layout.

Modern HTML also lets related details elements share a name attribute. Opening one closes the others, like an accordion. Use that only when comparing two open sections is not important. Forced exclusivity can make scanning harder.

Style through details[open] and summary. Keep a visible focus indicator. If you replace the default marker, your replacement still has to show open vs closed. The content stays in the document, which helps when JavaScript is off.

Try this on your own board: add two task-note disclosures, log each toggle, then give both the same non-empty name and confirm only one stays open. Remove name if comparing both notes matters more. Style the summary in focused and open states. If nothing toggles, check that summary is inside details and is its first summary child.