🎯 Purpose
The Accordion widget helps organize content into collapsible panels, saving space while enabling users to expand only the details they want to view—ideal for FAQs, step-by-step guides, schedules, or highlighted feature lists.
⚙️ Key Features & Configuration
Add and Edit Items
Drag the widget into your layout, then in the content panel add, remove, or edit accordion items.
Each item has a title and a content area that supports text, images, links, and even nested elements for flexibility.
Single-Expand Behavior
When the page loads, the first panel is expanded by default.
As users open a new panel, previously opened ones automatically collapse—maintaining a tidy interface and preventing content overload.
Icons & Headers
Customize both the expand and collapse icons—choose built-in icons, upload your own SVG, or go icon-free.
Set the HTML tag for item titles (H1–H6 or DIV) to match your design hierarchy and accessibility needs.
Schema for SEO
Enable FAQ Schema markup to help search engines understand your content and potentially enhance search results.
🎨 Style Customization
Panel Borders & Spacing
Control border width, color, and spacing between items to create distinct, structured panels.
Title Styling
Adjust typography, background, text colors for both active and inactive states.
Apply text stroke, shadows, padding, and hover effects to enhance visual feedback.
Icon Styling
Position icons left or right and customize size, color, spacing, plus distinct styling for active and hover states.
Content Area Appearance
Style the content background, text color, typography, shadows, and content padding for a polished reading experience.
⚙️ Advanced Options
Responsive Controls
Enable separate typography and spacing settings for desktop, tablet, and mobile views for optimal readability.Layout & Integration
Use margin, padding, positioning, motion/entrance effects, custom CSS classes, and other advanced parameters to blend the widget seamlessly into your design.
✅ Best Practices
Use the Accordion for FAQs, timelines, recipes, itineraries, or any content that benefits from compartmentalized layout.
Keep titles concise and descriptive for intuitive navigation.
Use FAQ Schema when applicable for SEO advantage.
Style your panel and header to match your site’s visual identity.
Test responsive behavior to ensure panels display correctly across devices.
The Accordion widget offers a flexible, structured solution for presenting layered content—combining dynamic expand/collapse behavior with rich styling and SEO-friendly features.
