<details> / <summary>
Elementos HTML que dão um expansor/acordeão embutido sem JavaScript. <details> esconde o conteúdo atrás de um título <summary> clicável que abre e fecha. Acessível e amigável ao teclado direto de fábrica.
Mecânica: coloque o conteúdo dentro de <details> com um <summary> primeiro; o navegador mostra só o summary até você clicar, aí o conteúdo se abre. O atributo open controla/reflete o estado. Caso de uso: seções de FAQ, expansões de "leia mais", painéis recolhíveis, spoilers — tudo que antes exigia JS para mostrar/esconder. Novidade recente: o atributo name faz vários <details> com o mesmo nome se comportarem como um acordeão exclusivo (só um aberto por vez) — também sem JS. Ganho: acessibilidade de graça (funciona com leitor de tela e teclado), nenhum código, e funciona mesmo com JS desligado. Dá para estilizar com ::details-content e animar. Um exemplo clássico de um recurso HTML que substitui uma categoria inteira de widgets JS. Relacionado a dialog-element e popover.