Accordions for Power Apps

An accordion is a stacked list of headings where clicking one reveals the text under it and hides the others. Makers reach for it when a screen has to hold several short blocks of text, such as FAQ answers, help notes or the steps of a procedure, without showing all of them at once. Each PowerLibs accordion pastes as one gallery with the sections in its Items property. Accordion is free; Accordion Card and Accordion Plus need a Components, Ultra, Team or Lifetime plan.

Pick a variant

Component	Plan	YAML	What it is for	Settings you can change
Accordion Plus	Paid	Classic, Modern	Sections with an animated plus and minus icon and a highlight color on the open one	Active Color, then the same item list: Title and Content per item, Add New Item, a delete icon per item
Accordion	Free	Classic, Modern	Stacked headings that each reveal one block of text, one open at a time	Item 1, Item 2 and so on, each with a Title box and a Content box; Add New Item; a delete icon per item
Accordion Card	Paid	Classic, Modern	The same list with every section inside its own card container	Item 1, Item 2 and so on, each with a Title box and a Content box; Add New Item; a delete icon per item
Bordered Accordion	Paid	Classic	Each row is a bordered card. The open card takes the brand color on its border, an accent stripe on the left and a colored title. One row open at a time. Light and dark.	See the Settings tab
Steps Accordion	Paid	Classic	Numbered rows for onboarding and processes. The open step lights up its badge in the brand color, a finished step shows a green check. One row open at a time. Light and dark.	See the Settings tab
Settings Accordion	Paid	Classic	The layout of a settings page: a leading icon in a tinted square, a title with a one-line subtitle, and a chevron. Open reveals the details. Light and dark.	See the Settings tab
Flush Accordion	Paid	Classic	No cards, only dividers and a plus that turns into a minus. Several rows can be open at once, with Expand all and Collapse all links above the list. Light and dark.	See the Settings tab

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: Accordions.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

Each accordion is a gallery named galAccordion (galAccordionModern in the Modern YAML, galAccordionCardModern for the Modern Accordion Card). Its Items property holds a table with three columns: id, title and body. The button btnAccordion on every row (btnButtonCanvas in Modern) writes the clicked row's id into the context variable varOpenAccordionItemId, and the body label lblBody is visible only while its row's id matches. The gal, lbl, btn and var prefixes come from your project settings.

Put this in the OnSelect property of any button on the same screen to open the second section from code. Blank() instead of a number closes every section:

UpdateContext({ varOpenAccordionItemId: 2 })

Put this in the Text property of a Label on the same screen to show which section is open. It has to be the same screen, because a context variable does not exist anywhere else:

If(
    IsBlank(varOpenAccordionItemId),
    "Nothing open",
    LookUp(galAccordion.AllItems, id = varOpenAccordionItemId, title)
)

Put this in the Items property of galAccordion to feed the sections from a SharePoint list called FAQ that has a Title column and a multi-line Answer column. The three column names must stay id, title and body, because every control in the row reads them by name:

AddColumns(
    FAQ,
    "id", ID,
    "title", Title,
    "body", Answer
)

Good to know

Every section starts collapsed and only one can be open. varOpenAccordionItemId is blank until someone clicks a heading, so to start with a section open put UpdateContext({ varOpenAccordionItemId: 1 }) in the screen's OnVisible property.
The Title and Content text is written straight into the YAML between double quotes, and the generator does not escape anything. A double quote inside a title or an answer breaks the paste; use single quotes in your text instead.
The gallery has a fixed Height (351, or 394 for Accordion Plus) and no visible scrollbar. A long answer grows its row, because lblBody has AutoHeight switched on, so if the last section disappears off the bottom, raise the gallery's Height property in Power Apps Studio.
Accordion and Accordion Card ignore the brand color from your settings. Their colors are a built-in grey and white set, and the light and dark toggle in the component header swaps it for a dark set before you copy. Only Accordion Plus takes a color: the Active Color setting, used for the title and the icon of the open section.
Every accordion offers Classic and Modern YAML. The Modern version swaps the two labels for Text controls and the button for a modern Button named btnButtonCanvas, and the gallery becomes galAccordionModern (galAccordionCardModern for Accordion Card). The arrow stays an Image control in both. Swap the names in the snippets above if you copy the Modern version.

Open the family in the library at Accordions. Related guides: Tabs and Cards.