Create and display unlimited FAQs, product info, or detailed content with the Horizontal Accordion Block, maximizing horizontal space and adding a modern touch. Choose from Timeline or Numbered templates, and enhance your content with smart interactions, built-in search, SEO-ready FAQ schema, smooth animations, and full customization to match your brand.

How to Add the Horizontal Accordion Block:

• Go to your WordPress Dashboard.
• Navigate to Pages > Add New (or edit an existing page).
• In the block editor, click the “+” (Add Block) button.
• Search for “Horizontal Accordion” under the Easy Accordion category.
• Click to insert the Horizontal Accordion Block into your page.

How to Customize Horizontal Accordion Block:

Using the Horizontal Accordion Block, you can showcase FAQs, product details, or text-heavy content in a clean, side-expanding layout. Follow the steps below to add unlimited items and customize the styling as you need.

• Add Unlimited Items: Use the “+ Add New FAQ” button to insert unlimited accordion panels.
• Easy Controls: Define which items stay open by default and manage toggle triggers (Click, Mouseover, or AutoPlay).
• Enhance Headers: Add subtitles, unique icons, or anchor links to improve visual hierarchy and navigation.
• Full Styling: Customize typography, colors, backgrounds, spacing, toggle icons, and container design for a seamless brand fit.

N.B: You can also easily customize and add style to each single accordion item as you wish. For details, visit here.

Now, let’s explore the detailed Settings & Stylings:

Accordion Templates: General

• Two Stunning Templates: Choose from 2 stylish presets, such as Timeline and Numbered, as your brand’s needs.

• Item Gap & Max Width: Set vertical spacing between items and set the container’s maximum width for perfect alignment.
• Collapse Title & Expanded Area Width: Adjust the Collapse Title Width and Expanded Area Width to ensure optimal readability on smaller screens.
• Display Vertical on Mobile: Enable this toggle to show Horizontal Accordion as Vertical on Mobile.

Template-Specific Styles:

The following settings appear dynamically based on your chosen accordion template:

• Timeline Style (Timeline Template): Define the line color, width, and states on Normal or Hover from here.

• FAQ Numbering Style (Numbering Template): Select the FAQ Numbering style from Number, Roman & Alphabet.
• Style the FAQ Numbering: Set the number size, colors, and choose between Left or Right alignment.

Advanced Utilities:

• FAQ Search: Toggle this On/Off to enable instant FAQ filtering with advanced features. For details, visit here.
• FAQ Schema: Enable this toggle to automatically apply structured data for search engine visibility.
• Preloader: Enable it to show a smooth loading animation while the block loads on the page.
• Item Background: Set specific background types and colors for Normal, Hover, and Active states.

Accordion Interactions:

From the Accordion Interactions panel, you can define how panels trigger, scroll, and link, ensuring a smooth and intuitive browsing experience for your visitors.

• Activator Event: Choose the trigger to open accordions: On Click, Mouseover, or AutoPlay.
• Open First Item: Select it to open only the first accordion item, while keeping other items collapsed.
• Open Selected Item: Select it to set the number of accordion items you want to show on Click, while keeping other items collapsed.
• AutoPlay Delay: If AutoPlay is ON, set the duration (ms) between automatic accordion transitions from here.

• Scroll to Opened Item on Load: Enable it to scroll the browser to an active accordion immediately upon page entry.
• Anchor Links: Enable unique URLs to link directly to specific accordion items.
• Link Type: Generate anchor links based on the Title text or a unique ID.

Toggle Icon: General

From the Toggle Icon panel, you can customize the appearance, behavior, and positioning of the icons that indicate whether an accordion item is expanded or collapsed.

• Toggle Icon Style: Select from various icon pairs, like arrows or plus/minus signs, for open and closed states.
• Angle Right 90°: Toggle this to rotate the icon when the accordion panel is active.
• Icon Size: Use the responsive slider to set the icon’s pixel size across different devices.
• Icon Position: Set the toggle icon to appear at the Top or Bottom of the Title.

Style Toggle Icon:

Customize the colors, background types, borders, and spacing of your icons for Normal, Hover, and Active states from here.

Title: General

From the Title panel, you can configure the structural tags, alignment, and sub-labels for your accordion headers to improve both SEO and visual hierarchy.

• Choose HTML Tag: Select the appropriate heading tag (h1–h6, p, or span) to ensure correct SEO structure for your questions.
• Enable Subtitle: Toggle this on to add a secondary line of text to your accordion header.
• Subtitle Position: Define whether the subtitle appears at the Top or Bottom of the primary title.

Enable Title Featured Icon: Use this toggle to show/hide a dedicated icon that sits specifically within the title area.

• Icon Size & Gap: Set the exact pixel dimensions of the featured icon.
• Icon Gap: Adjust the spacing between the featured icon and the title text.
• Icon Position: Choose to place the featured icon either Before Title or After Title.
• Vertical Alignment: Align the icon to the Top, Middle, or Bottom relative to the title text line. 
• Alignment: Set the text and icon justification to Left, Center, or Right.

Style Title Featured Icon: 

Use this panel to adjust the featured icon’s color, border width, and padding across different interaction states to create a distinct visual anchor.

Style Title & Subtitle:

This panel allows you to define typography, box shadows, and background colors for titles in Normal, Hover, and Active states while managing border radius and internal padding.

Content: General

From the Content panel, you can add animation of your accordion’s expanded area to ensure your answers are presented clearly.

• Animation Effects: Choose visual effects from 10 more styles for the content when it expands to create a more dynamic feel.
• Animation Delay: Define the autoplay delay time (in ms) before the opening animation begins.

Style Content:

From this panel, you can customize typography, content color, background types & color, and manage internal padding for a clean layout.

Motion Effects:

From the Motion Effects panel, you can add animations and interactive movement to your accordion, making the content feel more dynamic as users scroll or interact.

• Enable Scrolling Effects: Use this toggle to enable or disable scroll-based interactions.
• Vertical Scroll: Use this to set how the animation will appear. Set the Direction to (Up/down), speed, and apply the effect within the viewport.

• Apply Effect ON: Set the devices, such as Desktop, Tablet, or Mobile, to apply the effect on.
• Entrance Animation: Choose how the accordion appears when it enters the viewport, such as Fade In, Slide Up, Zoom In, or Bounce.
• Animation Speed & Delay: Set the Animation Speed & Adjust Animation Delay in milliseconds from here.

Advanced Settings:

The Advanced panel allows you to manage the overall container of the accordion, covering visibility, accessibility, and high-level styling.

General:

• Background & Border: Set the background type (Solid, Gradient, Image, or Video), border-radius, and box shadows for the main block container.
• Spacing: Define the precise Padding and Margin (in px) for the entire accordion structure.
• Accessibility: Enable this toggle to ensure the accordion follows standard web accessibility guidelines for screen readers and keyboard navigation. 

Visibility:

• Device Hiding: Toggle visibility on or off to hide the entire accordion block on Desktop, Tablet, or Mobile viewports for better responsive control.

Advanced:

• Custom CSS: Apply a unique Custom CSS Class or Custom CSS ID to the block for deep styling or advanced developer hooks.

Congratulations! Let’s watch a live demo of how your Horizontal Accordion will look.