How to Make a Horizontal Accordion in Elementor?

Table Of Content

Creating a horizontal accordion in Elementor lets you display collapsible content panels side by side rather than stacked vertically, making it easier for visitors to compare sections or browse grouped content without scrolling.

The default Elementor Accordion widget does not include a horizontal layout option.

With the Accordion widget in The Plus Addons for Elementor, you can switch from a vertical to a horizontal accordion layout using a single toggle in the Special Options panel.

Best Used For:

  • Service and SaaS websites that present feature comparisons or tiered plans in collapsible side-by-side panels
  • FAQ and knowledge base pages where horizontal panels reduce the space taken by long lists of questions
  • Portfolio and agency sites that need compact interactive content blocks without vertical stacking

To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Create Horizontal Accordion

To create a horizontal accordion in the Elementor editor, drag the Accordion widget onto your page and go to Special Options > Horizontal Accordion.

Turn the toggle on to switch the accordion from vertical to horizontal. The following settings let you control the appearance and behavior of the horizontal layout.

Horizontal accordion settings in the plus addons for elementor
  • Layout – Choose how the title and content panels are arranged in the horizontal accordion. Use this when you want titles to run vertically along the side of each panel or to match the orientation to your page design.
  • Height – Set a fixed height for the accordion container. This is useful when you need all panels to maintain a consistent size regardless of how much content each one contains.
  • Title Width – Control how wide the title strip is within each panel. Set a narrower title width when the panel content is long so the expanded area has enough room to display clearly.
  • Open Speed – Set how quickly a panel expands when a visitor clicks its title. Use a shorter value (200 to 300 milliseconds) for quick interactive feedback or a longer value for a smoother animated effect.
  • Close Speed – Set how quickly the panel collapses after a visitor clicks to close it. Match this value to Open Speed so the expand and collapse animations feel consistent in both directions.

Horizontal accordion preview

NOTE: You can’t use the On Hover Accordion and Horizontal Accordion options together.

Expand Your Accordion Capabilities

The Plus Addons for Elementor includes additional Pro-exclusive features for the Accordion widget that extend the default horizontal accordion with interaction modes and integration options.

Hover Accordion (Open accordion on mouse hover)

Open and close accordion panels on hover rather than on click. This is ideal for interactive menus, feature showcases, and FAQ tabs where visitors browse quickly without committing to a click. To set this up, see how to open an Elementor accordion on hover.

Directly Link Accordion Items

Assign a direct URL to any accordion item so visitors land on the page with that specific panel already open. Use this when sharing links in email campaigns or support documentation, so users see the relevant answer immediately without scrolling or clicking.

Collapse or Expand All Accordion Items

Add a button that collapses or expands every panel at once. This is useful on FAQ pages with many items, where visitors may want to open all answers to scan quickly or close all to reset the view. For additional accordion behavior settings, see how to set an Elementor accordion closed by default.

Progressive Load / Autoplay & Search Integration

Accordion panels can open sequentially in autoplay mode, or visitors can search and filter content using the built-in search functionality. Use autoplay for presentation-style layouts where users move through content in order, and search integration for large FAQ sections with many items.

Connect Carousel Anything

Connect the accordion with the Carousel Anything widget so each accordion item corresponds to a slide. When a visitor opens a panel, the connected carousel moves to the matching slide. This is useful for product feature overviews or step-by-step process guides where each panel has matching visual content.

Why Upgrade to Pro?

These accordion features are exclusive to the Pro version of The Plus Addons for Elementor.

The Pro plan includes 120+ widgets, advanced extras, and full plugin support.

Related Frequently Asked Questions

Related Docs