Details and summary
<details>, <summary>, details element, disclosure widget, native accordionDefinition
The HTML pair for a disclosure — <details> holds content that is hidden until opened, <summary> is the always-visible line that toggles it — with the open state, the keyboard handling (Enter and Space on the summary), the open attribute and the toggle event all provided by the browser; the disclosure pattern, and most of an accordion, with no script
The element the accordion contract on this site could be realized with: each item a <details>, its header a <summary> that already is a button to assistive technology, name (2023) grouping several so that opening one closes the rest — the allowMultipleOpen: false constraint as an attribute. Styleable with ::marker (or list-style: none on the summary to drop the triangle) and, since 2024, ::details-content for the panel, which is what makes the open animation possible in CSS. Chrome uses it for hidden=until-found, so closed content is still findable with ⌘F. The code blocks on this site wrap a long listing in one.
A show-more that the browser owns. The summary is focusable, the state is an attribute, the content is in the DOM whether open or not — so it is searchable and indexable — and the whole thing works before a byte of JavaScript arrives. When a disclosure needs more than that (arrow-key navigation between headers, a controlled open state), the ARIA pattern adds it on top; it rarely needs more.