Accordion

Introduction

Welcome to the Accordion component documentation! As part of the page builder in App Platform, the Accordion component allows you to present collapsible content panels, allowing users to expand or collapse sections to view relevant information one at a time.

Why we developed it

The accordion is there to help manage and organize information efficiently, particularly when users need to navigate through large sets of data or content. By showing one section at a time, it reduces visual clutter and enables a focused user experience.

What it could be used for...

• Presenting FAQs, where each question expands into a detailed answer

• Organizing grouped content, like features or categories, for better readability

• Cleaner presentation of sidebar menu items.

• Collapsing or expanding informational sections on dashboards or reports

• Providing step-by-step instructions, with each step expandable to reveal more details

Example \ Use Case

A support website may use an accordion to present frequently asked questions (FAQs). Each question appears as a header, and when clicked, expands to reveal the answer. This lets users focus on a specific question without being distracted by other content.

Another great example of how accordions can be utilized are in the sidebar. By adding accordion components to your sidebar, you can nest the 'Menu' component inside it. This allows you to break your sidebar out into sections (ie: sub-menus), to enhance your app's navigation for your users.

Adding an Accordion to your page

1. Access the Canvas: Open the page you're working on in edit mode, in App Platform.

2. Drag-and-Drop: Locate the 'Accordion' component in the component library and then drag and drop it onto the canvas.

Configuring the Accordion component

1. Select the component: Click on the added 'Accordion' component to select it.

2. Properties Panel: On the properties panel, you'll find various configurable options:

   • Text Content

     • Title: Specify the title of the component.

     • Render details text: Toggle to show\hide text defined in the 'Details' panel.

     • Details: Text that will be displayed on the component.

   • Layout

     • Start Expanded: Toggle to load component in default expanded\collapsed state.

     • Width: Set the width of the component.

     • Override Theme: Enable toggle to apply custom styling.

     • Colors

       • Background: Set the color of the component.

       • Text: Set the color of the text in the component.

     • Margin: Set the distance between the accordion and its surrounding components.

3. Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.

If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! 🎨🚀