How to create an accordion (expand and collapse)

In TeleportHQ, the Accordion element shows a clickable heading that opens and closes a panel of content, which is ideal for FAQs. Drag Accordion from Elements → Primitives → Interactive onto your page, then edit its heading and content. In Accordion settings, choose whether it starts Open or Closed, and give several accordions the same Group Name so opening one closes the others.

Before you start#

• The Accordion element works in websites and web apps.
• For a complete FAQ layout, you can start from Elements → Sections → FAQ instead. Most of its designs have questions that open and close on their own, without the Accordion element and its settings. See How to add ready-made sections.

1. Add an accordion#

1. In the left sidebar, click Elements.
2. On the Primitives tab, scroll to the Interactive group.
3. Drag Accordion onto the canvas, for example into your FAQ section. Or select that section and click Accordion: it goes inside it.

An accordion has an Accordion Trigger (the part visitors click, with an Accordion Icon) and Accordion Content (the part that opens).

2. Add your question and answer#

1. Select the accordion. In the right panel, find Accordion settings.
2. Set Default state to Open, so you can see the content while you edit.
3. Double-click the heading text in the trigger and type your question, for example Do you deliver on weekends?
4. Double-click the text in the content and type the answer.
5. Set Default state back to Closed if the answer should be hidden until clicked.

You can drag any element into the Accordion Content, such as images, lists or buttons.

3. Make a list of questions#

1. Select the accordion and press Cmd+D or Ctrl+D to duplicate it. Repeat for each question.
2. Change the text in each copy.
3. To let only one answer be open at a time, select each accordion and type the same Group Name in Accordion settings, for example faq.

Check that it worked#

There's no in-canvas Preview button for accordions, so test them in a preview. Preview your site and click each question: its answer opens. With a shared Group Name, opening one question closes the one that was open.

Troubleshooting#

I can't see the content to edit it Set Default state to Open in Accordion settings.

Several answers stay open together Give every accordion in the list exactly the same Group Name.

Accordion settings doesn't appear The accordion is inside a component copy on the page. Open the component to edit it. See How to edit a component and update every copy.

Good to know#

• Style the trigger, icon and content like any element, by selecting each part and using the right panel.
• For more complex show-and-hide behavior (for example tabs, or content that appears after a choice), see How to show or hide elements based on a condition. It works in websites too, without a web app.