While Etch has a component, I have a component, and WordPress now has an accordion, the need for another might seem unnecessary, but I saw one today that was plain and simple. This uses the detail/summary HTML elements and some ACSS styles.

This is FAQ #1

Lorem ipsum dolor sit amet consectetur adipisicing elit. At dignissimos eius mollitia accusantium fuga hic possimus esse quaerat praesentium doloremque.

This is FAQ #2

Lorem ipsum dolor sit amet consectetur adipisicing elit. At dignissimos eius mollitia accusantium fuga hic possimus esse quaerat praesentium doloremque.

This is FAQ #3

Lorem ipsum dolor sit amet consectetur adipisicing elit. At dignissimos eius mollitia accusantium fuga hic possimus esse quaerat praesentium doloremque.

The code

Just some basic HTML and CSS. No JS, no props. Add as many or as few as you need. Add them to a loop or manage them statically.

{"type":"block","gutenbergBlock":{"blockName":"etch/element","attrs":{"metadata":{"name":"Fw Detail Summary"},"tag":"div","attributes":{"class":"fw-detail-summary"},"styles":["rd3a79i"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Item"},"tag":"details","attributes":{"class":"fw-detail-summary__item","name":"faq-accordion"},"styles":["zgy5264"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Trigger"},"tag":"summary","attributes":{"class":"fw-detail-summary__trigger"},"styles":["aqjq04s"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Title"},"tag":"span","attributes":{"class":"fw-detail-summary__title"},"styles":["5a4he37"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"metadata":{"name":"Text"},"content":"This is FAQ #1"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Icon"},"tag":"svg","attributes":{"class":"fw-detail-summary__icon","xmlns":"http://www.w3.org/2000/svg","width":"24","height":"24","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},"styles":["k6os7ki"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"tag":"path","attributes":{"d":"m6 9 6 6 6-6"}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n","\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Content"},"tag":"div","attributes":{"class":"fw-detail-summary__content"},"styles":["4ib6w28"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Text"},"tag":"p","attributes":{}},"innerBlocks":[{"blockName":"etch/text","attrs":{"metadata":{"name":"Text"},"content":"Lorem ipsum dolor sit amet consectetur adipisicing elit. At dignissimos eius mollitia accusantium fuga hic possimus esse quaerat praesentium doloremque."},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Item"},"tag":"details","attributes":{"class":"fw-detail-summary__item","name":"faq-accordion"},"styles":["zgy5264"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Trigger"},"tag":"summary","attributes":{"class":"fw-detail-summary__trigger"},"styles":["aqjq04s"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Title"},"tag":"span","attributes":{"class":"fw-detail-summary__title"},"styles":["5a4he37"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"metadata":{"name":"Text"},"content":"This is FAQ #2"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Icon"},"tag":"svg","attributes":{"class":"fw-detail-summary__icon","xmlns":"http://www.w3.org/2000/svg","width":"24","height":"24","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},"styles":["k6os7ki"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"tag":"path","attributes":{"d":"m6 9 6 6 6-6"}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n","\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Content"},"tag":"div","attributes":{"class":"fw-detail-summary__content"},"styles":["4ib6w28"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Text"},"tag":"p","attributes":{}},"innerBlocks":[{"blockName":"etch/text","attrs":{"metadata":{"name":"Text"},"content":"Lorem ipsum dolor sit amet consectetur adipisicing elit. At dignissimos eius mollitia accusantium fuga hic possimus esse quaerat praesentium doloremque."},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Item"},"tag":"details","attributes":{"class":"fw-detail-summary__item","name":"faq-accordion"},"styles":["zgy5264"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Trigger"},"tag":"summary","attributes":{"class":"fw-detail-summary__trigger"},"styles":["aqjq04s"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Title"},"tag":"span","attributes":{"class":"fw-detail-summary__title"},"styles":["5a4he37"]},"innerBlocks":[{"blockName":"etch/text","attrs":{"metadata":{"name":"Text"},"content":"This is FAQ #3"},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Icon"},"tag":"svg","attributes":{"class":"fw-detail-summary__icon","xmlns":"http://www.w3.org/2000/svg","width":"24","height":"24","viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","aria-hidden":"true"},"styles":["k6os7ki"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"tag":"path","attributes":{"d":"m6 9 6 6 6-6"}},"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n","\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n"]},{"blockName":"etch/element","attrs":{"metadata":{"name":"Content"},"tag":"div","attributes":{"class":"fw-detail-summary__content"},"styles":["4ib6w28"]},"innerBlocks":[{"blockName":"etch/element","attrs":{"metadata":{"name":"Text"},"tag":"p","attributes":{}},"innerBlocks":[{"blockName":"etch/text","attrs":{"metadata":{"name":"Text"},"content":"Lorem ipsum dolor sit amet consectetur adipisicing elit. At dignissimos eius mollitia accusantium fuga hic possimus esse quaerat praesentium doloremque."},"innerBlocks":[],"innerHTML":"","innerContent":[]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n","innerContent":["\n",null,"\n"]}],"innerHTML":"\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n"]}],"innerHTML":"\n\n\n\n\n\n","innerContent":["\n",null,"\n\n",null,"\n\n",null,"\n"]},"version":2.1,"timestamp":"2026-04-02T22:14:25.776Z","styles":{"rd3a79i":{"type":"class","selector":".fw-detail-summary","collection":"default","css":"border-radius: var(--radius-l);\n  border: 1px solid color-mix(in oklch, var(--base-dark) 20%, transparent);\n  overflow: clip;\n  box-shadow: var(--shadow-s);\n  align-self: start;\n  inline-size: 100%;\n  max-inline-size: 80ch;\n  corner-shape: squircle;\n\n  &__item {\n    border-bottom: 1px solid color-mix(in oklch, var(--base-dark) 20%, transparent);\n\n    &:last-child {\n      border-bottom: 0;\n    }\n\n    &[open] {\n      & > .fw-detail-summary__trigger {\n         background-color: color-mix(in oklch, var(--base-dark) 10%, transparent);\n        &:hover {\n      background-color: color-mix(in oklch, var(--base-dark) 5%, transparent);\n    }\n        & .fw-detail-summary__icon {\n          transform: rotate(180deg);\n        }\n      }\n    }\n  }\n\n  &__trigger {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--space-s);\n    padding: var(--space-m) var(--space-l);\n    cursor: pointer;\n    list-style: none;\n    transition:\n      background-color 300ms ease,\n      color 300ms ease;\n\n    &::-webkit-details-marker {\n      display: none;\n    }\n\n    &:hover {\n      background-color: color-mix(in oklch, var(--base-dark) 5%, transparent);\n    }\n\n    &:focus-visible {\n      outline: 2px solid currentColor;\n      outline-offset: -2px;\n    }\n  }\n\n  &__title {\n    font-size: var(--text-m);\n    font-weight: 600;\n  }\n\n  &__icon {\n    flex: 0 0 auto;\n    transition: transform 300ms ease;\n  }\n\n  &__content {\n    padding: var(--space-l) var(--space-m);\n    color: var(--base-ultra-dark);\n\n    & > *:first-child {\n      margin-block-start: 0;\n    }\n\n    & > *:last-child {\n      margin-block-end: 0;\n    }\n  }","readonly":false},"zgy5264":{"type":"class","selector":".fw-detail-summary__item","collection":"default","css":"","readonly":false},"aqjq04s":{"type":"class","selector":".fw-detail-summary__trigger","collection":"default","css":"","readonly":false},"5a4he37":{"type":"class","selector":".fw-detail-summary__title","collection":"default","css":"","readonly":false},"k6os7ki":{"type":"class","selector":".fw-detail-summary__icon","collection":"default","css":"","readonly":false},"4ib6w28":{"type":"class","selector":".fw-detail-summary__content","collection":"default","css":"","readonly":false}}}