Accordions

  • Updated

Replo supports a type of component called an "Accordion", which can be used to show and hide content. Accordions are a specialized type of Collapsible. They differ from regular Collapsibles in that when one element is opened, the others are closed. They are used for situations when there's auxillary information to be shown, like in FAQ sections where the user has to expand and collapse the answers to each question.

To Add an Accordion:

  1. Navigate to the page you want to add a Accordion to in the editor.
  2. On the left side of the editor, click the "Components" toggle, then search for "Accordion."
  3. Drag the Accordion into the page.

To Preview Closed and Open States:

  1. Select a component inside the Accordion you want to edit.
  2. Find the Expand/Collapse icon near the Accordion's name in the editor preview, then click it to preview the open state of the Accordion.
  3. If you want to edit the closed state, use the same button again to close the Accordion.

Accordion Behaviors

  • Accordion containers wrap around Collapsible components. If you remove or add a Collapsible to an Accordion the Collapsible component will behave based on the rules of your Accordion.
  • Accordions autoclose non-focused Collapsibles it contains by default, but this can be disabled.

Was this article helpful?