Advanced Accordion
Long blocks of text overwhelm, but hidden answers frustrate. An accordion finds the perfect balance – when it’s thoughtfully designed. Master Addons Advanced Accordion Element gives you complete control over this classic interactive tool. Choose between clean Accordion (one open at a time) or flexible Toggle (multiple open) behavior. Fill items with text, images, or even entire saved templates. Then, style every single state: the normal title, the hover, the active open item, and the content area itself. It’s not just for FAQs; it’s for feature lists, product specs, portfolios, or any content that benefits from a clean, reveal-on-demand presentation.
Dual Behavior Modes & Dynamic Content
Start by defining how your accordion behaves. Select Accordion Type: traditional Accordion for a focused, one-item-open flow, or Toggle for a more flexible, checklist-style where users can open multiple items. Then, build your items. For each tab, set a Title and choose a Content Type. Go beyond simple text – use Content for rich text and media, or select from Saved Section, Saved Widget, or Saved Page Template to insert entire pre-designed blocks of content. This makes it a powerful tool for modular page building and reusing complex layouts.
- Two Interaction Models: Accordion (single open) for stepped processes, Toggle (multiple open) for checklists or features.
- Rich Content Sources: Populate accordion items with simple text, images, or entire saved Elementor sections and templates.
- Default Active Item: Set any item to be Active as Default when the page loads.
- Easy Management: Add, remove, and reorder items with the + Add Item button and intuitive repeater.
State-Based Title Styling & Structure
The title bar is what users click – make every visual state intentional. Style the Title separately for its Normal, Hover, and Active (open) states. For each state, define a unique Background Type (color, gradient), Text Color, and Typography. Control the Title Align, Padding, Border, Border Radius, and add a Box Shadow. This level of detail lets you create a clear visual journey: a neutral default, an inviting hover, and a distinct “open” state that confirms the user’s action.
- Triple-State Design: Apply distinct styles to Normal, Hover, and Active title bars.
- Advanced Backgrounds: Use solid colors or gradients for different states to create depth.
- Full Box Control: Adjust Padding, Borders, and Box Shadow to make each title bar a designed component.
Customizable Toggle Icons with Dual States
Move beyond the generic triangle icon. Enable Custom Icon to choose any icon from the library for both the Expand (closed state) and Collapse (open state) actions. Position the icon to the Left or Right. Then, style these icons independently for Normal, Hover, and Active states, changing their Color, Size, and Background. Adjust Icon Spacing and Padding around the icon for perfect alignment. This turns a functional indicator into a cohesive part of your design language.
- Dual Icons: Set different icons for the “plus” (expand) and “minus” (collapse) states.
- State-Specific Icon Styling: Change the icon’s color and background when the item is hovered or active.
- Alignment properly: Control icon Alignment, Position, and Spacing relative to the title text.
Content Area & Container Styling
The content that slides down deserves its own design consideration. Style the Content area with its own Background Color, Text Color, Typography, and internal Padding. Add a Text Shadow for readability if needed. Then, style the overall Items container that holds all the accordion sections: set the Spacing between items, a global Border, Border Radius, and Box Shadow. This ensures the entire widget feels like a unified, polished component, and the opened content is easy and pleasant to read.
- Content Area Design: Style the background and text of the drop-down content for optimal readability.
- Container-Level Polish: Apply Border Radius and Box Shadow to the entire accordion group.
- Item Spacing: Control the Spacing (margin) between each accordion item for a clean, separated look.
Frequently Asked Questions For Advanced Accordion
What’s the practical difference between “Accordion” and “Toggle” type?
Accordion: Only one item can be open at a time. Opening a new item automatically closes the previous one. Best for FAQ pages or sequential instructions where you want to minimize scrolling and focus attention.
Toggle: Multiple items can be open simultaneously. Users can expand several items to compare or gather information. Best for feature checklists, product specification lists, or content where users need to see multiple sections at once.
Can I make one item start open when the page loads?
Yes. When editing an individual item in the Content tab, you’ll find an Active as Default option. Set this to Yes for the item you want to be pre-opened. Only one item should have this set in an Accordion type to avoid conflict.
What are "Saved Section" or "Saved Page Template" as content types?
These are powerful Elementor Pro features. If you have a section (like a team profile) or an entire page template (like a contact form) saved in your Elementor library, you can select it to appear inside the accordion item. This lets you embed complex, pre-designed layouts within your accordion.
How do the hover and active states work on mobile?
On touch devices, the first tap will often trigger both the Hover and Active states in quick succession (as the item opens). The styling you apply to the Active state is most important for mobile, as it will show which item is currently open. The Hover state may not be seen as a separate step.
Can I control the opening and closing animation speed?
Yes. In the Content tab, you’ll find Toggle Speed (ms). The value is in milliseconds (e.g., 300). A lower number (like 200) makes it faster and snappier; a higher number (like 500) makes it slower and more deliberate.
Is the accordion accessible for keyboard navigation and screen readers?
A properly coded accordion widget should be accessible. The use of semantic Title HTML Tags (like <div>, <h3>) helps structure the content. The interactive states and ARIA attributes for expanded/collapsed states are typically handled by the widget to ensure screen readers can announce the changes.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
