What are the Accordion Components?

Accordions refer to content areas that expand when clicked. Widely-used in web and mobile design, accordions are particularly suitable for mobile apps, given the limited screen space on mobile devices. 

In Fliplet, accordions are created using two components, namely:

  • Accordion Heading

  • End of Accordion Group

Accordion headings group content together. In your app, accordions will show the headings initially.  When you click the heading, it expands and displays the content found below the heading. Other Fliplet components can be used to display content in an accordion. 

On the other hand, the End of Accordion Group is typically used at the bottom of a group of Accordion Headings, separating the group from other content sections. They can also be used to divide several Accordion headings into separate groups of independent collapsible sections.

How to use the Accordion Components

Why use the Accordion Components

Accordions are used for hiding and expanding content in your app. They are useful for various reasons, including:

  • Adding lengthy pieces of static content such as a privacy notice and descriptions of things that can be shortened.

  • Highlighting different sections of a screen without having all the details visible at once. This leaves the user with the option to expand the sections depending on their interests.

There are many other areas where you can use Accordions. You should be able to determine what these are as you go about designing and developing your app.

Options of the Accordion Components

The option below is only available to the Accordion Heading component. It’s just a single option since you have to insert your content directly below the Accordion Heading title. On the other hand, the End of Accordion Group component does not have any options as it only serves to group one or more accordions together. Be sure to add both components to have your accordion function correctly.

Accordion title (Accordion Heading only)

The name that will be displayed on the Accordion on the app screen