How To Create A Beautiful Accordion In PowerApps

Accordion In PowerApps:

When you have a large amount of data or FAQs to show on a canvas PowerApps, you can make use of accordion. We know that accordions are useful when you want to toggle between hiding and showing a large amount of content. In this article, we will learn how to develop an accordion in PowerApps. Here we are using a SharePoint list to store our questions and answers for the FAQ. You can also use a local collection as per your requirement instead of a SharePoint list. Let’s see step by step tutorial on how to create a FAQ accordion in PowerApps.

Step 1 – Create a SharePoint list
Here we have a simple list named Beautiful Accordion with only two columns, Title, and Description. Add a few questions and answers to this list. Our list will look as below:

Step 2 – Add a flexible height gallery
Our questions and answers characters’ lengths will be different so we cannot use the fixed height gallery. If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain fewer data.

Add and configure a Flexible height gallery control so that you can:

Configure Label controls to expand or shrink based on their contents.
Position each control so that it automatically appears just under the control above it.

This flexible height gallery will have few default controls. Just select all and delete them.

Set the data source of the gallery to our SharePoint list

Add a button for the Question

Now to show the headings i.e. questions of the accordion, we will use button control. Set the properties of the button as below:

Border Radius = 0
Border = 0
Padding Left and Padding Right = 0
Text = ThisItem.Title

Add label for the answers

Add a label and set the text property to ThisItem.Description. You can add more padding as shown in below screenshot to look it more better.

Keeping Auto height On is the most important part of the step. This will help us to show flexible height as per the content of the answer.

Show Hide Logic
Now we need to show and hide the answer label based on the user selection. Simply put the below formula as a visible propety of your label.

If(Gallery2.Selected.ID = ThisItem.ID, true, false)

Add Icon to show the up and down arrow
Add Icon and set the Icon property as below:

If(Gallery2.Selected.ID = ThisItem.ID, Icon.ChevronDown, Icon.ChevronUp)