details and summary
Two elements, no script, and the only real catch is what happens when somebody hits print.
<details>
<summary>How long does delivery take?</summary>
<p>Two to three working days.</p>
</details>That is an accordion. It opens and closes on click, Enter and Space both work, it is in the tab order, and it announces its expanded state without an aria-expanded anywhere, because the browser owns the state rather than you.
I built this by hand, with a click handler and a class toggle and an ARIA attribute I sometimes remembered, on four projects before I sat down and read what the element already did.
Things worth knowing. open as an attribute makes it start expanded. Give several of them the same name and they behave as an exclusive group, one open at a time, which used to need script. The ::marker is the disclosure triangle, and list-style: none on the summary removes it if you want your own.
The catch is printing. A closed <details> is closed on paper too, so a page of FAQs prints as a column of questions with nothing under them. @media print { details { display: block; } details > *:not(summary) { display: block !important; } } or something like it, depending on how much you care.
Which is the general shape of these: the platform gives you the behavior, and what is left for you is the one edge case it could not guess.