Layout & build the FAQ
This page explains how to create the design and layout for an FAQ list:
- 1.Open a new application and enter the Design view.
- 2.Drag-and-drop a Container component into your application and name it
FAQ List. This container holds your questions and answers.
- 3.Drag-and-drop a Container into FAQ List and name it
FAQ 1.Note: This makes it easier to identify the container when you build your application logic.
- 4.Select FAQ 1 and open the Styles menu.
- 5.In the Layout and Styles sections, configure the following settings:
- Width:
400 - Mode: Row
- Spacing: Space between.
- 6.(Optional) In the Border section, set Width to
1. This adds a black outline around the container. - 7.Drag-and-drop the following components into the FAQ 1 container:
- Text
- Material UI Icon
- 8.Select the Icon, open the quick selection State menu, and set icon to
add.
- 9.Copy and paste FAQ 1 into the FAQ List container. This creates a new container with the same configuration.
- 10.Name the new container
Answer 1, and delete the Icon component from the Answer 1 container.
- 11.Copy and paste the FAQ 1 and Answer 1 containers into the FAQ List container for each question you want on the page. Name each container according to its spot in the list (i.e.,
FAQ 2,Answer 2,FAQ 3,Answer 3, etc.).
- 12.Double-click the text component in each container to input questions and answers.
- 13.Select each answer container and select Styles > Display > False. This hides the FAQ answers from your application UI.
After you create the FAQ list, continue to the Use the Toggle component to show/hide responses page to build your FAQ logic.