Understand the source
The first summary child supplies the disclosure control and its visible label. The paragraph that follows contains supporting information. The browser provides the basic state and interaction, which means this example needs no custom click handler or manually synchronized aria-expanded value.
<h1>Delivery questions</h1>
<details>
<summary>When will my order arrive?</summary>
<p>Most orders arrive within three working days.</p>
</details>Expected output
Initially only the delivery question appears. Activating it reveals the answer, and activating it again collapses the answer. Use Tab to reach the summary and test keyboard activation. The disclosure remains in the document flow; it does not behave like a modal dialog.
Make a deliberate change
Add open to details so the answer is initially expanded, then remove it and compare. Try open="false" and explain why the panel still starts open. Finally add a second, distinct question with an answer of its own, choosing a label that makes sense when read without the surrounding paragraph.
Review the behavior
Keep essential warnings visible rather than hiding them in an optional panel. Preserve a visible focus indicator when restyling summary. If adding grouping or custom icons, test that enhancement in the browsers you support and keep the information usable when the enhancement is unavailable.