The Accordion is a component designed to manage screen real estate by controlling the visibility of content based on user interaction. It presents a Header container that toggles the display of a Content container.

Structure and Editing

The component is highly customizable due to its nested structure:

• Header Customization: To edit the visible title and icon, you must access the elements nested below the View layer, within the Header layer.
• Content Customization: To define the content that appears when expanded, place components within the Content layer.

Controlling the Component State

The visual state (expanded or collapsed) is dynamically controlled via the component's Data property in the Settings Panel of the Right Sidebar.

• Default State: The Accordion is expanded by default.
• • To View Expanded State in Editor: Enter the boolean value True into the Data property.
  • To View Collapsed State in Editor: Change the boolean value in the Data property to False. This allows you to preview the component as it would appear before a user's interaction.