Skip to main content
The Accordion element serves to organize information in expandable and collapsible sections, allowing users to see only the content they want, keeping the interface clean and organized. What it’s for
  • Organize information in collapsible sections to save space.
  • Create interactive FAQs (Frequently Asked Questions).
  • Present detailed content in an organized and accessible way.
  • Improve user experience with intuitive navigation.
  • Reduce visual overload while keeping important information accessible.
What you can configure Opening Mode:
  • Single: Only one item can be open at a time (default behavior).
  • Multiple: Several items can be open simultaneously.
Item Content:
  • Title: Main text of each section with rich formatting (bold, italic, colors, etc.).
  • Description: Detailed content of each section with full text editor.
  • Variables: Insert dynamic variables in both title and description.
Content Settings:
  • Minimum: 1 required item.
  • Maximum: 10 items per accordion.
  • Formatting: Full editor with toolbar for advanced formatting.
Visual Styles:
  • Border: Color of separator lines between items.
  • Title: Custom color for the title text of each item.
  • Description: Custom color for the description content.
  • Icon: Color of the expand/collapse icon.
Animations:
  • Transition: Smooth animation when opening and closing items.
  • Icon: Icon rotation indicating the state (open/closed).
Interactivity:
  • Hover: Underline effect when hovering over the title.
  • Click: Expand/collapse content when clicking on the title.
Usage tip! Use accordions to organize complex information in a clear and accessible way. Keep titles concise and descriptive, and organize content logically. Avoid creating too many items (maximum 5-7) to avoid overwhelming the user. Use “Single” mode for FAQs and “Multiple” mode when users need to compare information between different sections.