How to Use the Accordion Element on Your Website

The Accordion Element is a great way to organize and present information in a structured and user-friendly way. It is commonly used for FAQs (Frequently Asked Questions), product details, or collapsible content sections to enhance readability and improve user experience.

1. Adding the Accordion Element

1. Open the Elements Panel on the left.
2. Find Accordion under "Basic Elements."
3. Click, hold, and drag it to your desired section.

2. Customizing the Accordion

Adding & Editing Content

• Click inside each accordion item to add or edit text.
• Add any element (e.g., text, images, buttons, or even columns) inside the accordion.
• To rename an accordion tab, click on the default text and type your own question or title.

Adding More Accordion Sections

• Click the Duplicate button to create additional sections.
• To rearrange the order, use the up/down arrows on each section.
• Delete unnecessary sections by clicking the Delete button.

3. Accordion Settings & Behavior

Expand/Collapse Settings

• Collapsible Mode: Allows users to close all sections.
• Auto Expand: Controls if the first section opens automatically.
• Transition Duration: Adjusts how quickly sections open and close.

Adding Icons

• Select an icon for expanding/collapsing (e.g., plus/minus).
• Adjust size, spacing, and alignment for better visibility.

4. Styling the Accordion

Typography & Colors

• Change font size, weight, and color for titles.
• Customize the background color of each section.
• Add borders, shadows, and hover effects for an interactive look.

Hover & Active Styles

• Set a hover color for when users place their cursor over an item.
• Define an active color for the currently open section.
• Adjust border styling to separate each item visually.

5. Making It Responsive

• Check the Tablet & Mobile Views to ensure proper display.
• Adjust font size, spacing, and padding for mobile optimization.
• Make sure accordion content doesn’t overlap or look crowded on smaller screens.

Why Use Accordions?

• Organized layout – Presents large amounts of information neatly.
• Improves user experience – Helps visitors find answers quickly.
• Saves space – Keeps content hidden until needed.
• Fully customizable – Adjust colors, icons, and styles to fit your design.

Accordions are one of the best ways to create an engaging, easy-to-navigate website while keeping the design clean and structured.