The Accordion Filters Widget for Elementor offers a compact and collapsible layout for filters, streamlining your website’s navigation. By organizing filters in an accordion style, this widget helps declutter pages while ensuring visitors can easily explore content. It’s a perfect choice for enhancing the browsing experience on content-heavy sites, such as product catalogs or portfolios.
Let’s look at each of the options in the Accordion Filters widget for Elementor below.
Add a Accordion Filters Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Accordion Filters”
- Hover over the widget in the search results and click install
- Add the “Accordion Filters” widget to any Elementor Page
General Settings
Activate On Breakpoint
Connected Filter widgets will be added under Accordion only on specific breakpoint. If disabled, filter widgets will appear in accordion on all devices.
First Appearance
Set the first appearance of accordion filter.
- First Opened
- All Closed
- All Opened
Close Item When Opened
Close one item automatically when another is opened.
Scroll to Head
Show scroll to head button on different devices.
- Off
- Desktop
- Mobile
- Desktop+Mobile
Open Accordion Icon
Choose icon for open accordion button.
Close Accordion Icon
Choose icon for close accordion button.
Icon Placement
Set the placement of icon.
- Icon First
- Icon Last
Hide Item if Empty
it hides Accordion Item if Filter Widget inside has no terms
Items Settings
Manage the items of the accordion filter using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Accordion Item Title
Type title for accordion item.
Filter Widget ID
Type the filter widget id and assign CSS ID to the widget you'd like to add to Accordion.
Accordion Filters Widget Styling
Choose colors that seamlessly blend with your website’s overall theme and style to create a visually appealing design. Additionally, customize the text, icons, fonts, and layout to ensure every element aligns perfectly with your creative vision.
Accordion Item Styling
Set the accordion item spacing, padding, border radius, background and border.
Accordion Item Header Styling
Style the accordion item header padding, border radius, background, and border.
Accordion Item Title Styling
You can set the accordion item title typography and color.
Accordion Dropdown Styling
Here, you can set the accordion dropdown spacing, padding, background, and border radius.
Open/Close Icon Styling
You can set the icon spacing, size, and icon color for open and close icon.
Accordion Filters Design Examples For Elementor
Here is the live use cases for the Accordion Filters Widget.
Snow Accessories product list with accordion filters.
Sports products list with accordion filters.
Thank you for exploring the Accordion Filters Widget for Elementor. This feature simplifies content navigation by organizing filters in accordion layout and adds dynamic functionality to your site. We hope this documentation has been helpful in setting up and utilizing the widget effectively.
For further assistance or additional resources, feel free to reach out or explore other widgets in our collection. We’re here to help you create engaging and seamless web designs!
