Easy Accordion Pro

  1. Home
  3. Docs
  5. Easy Accordion Pro
  7. Easy Accordion Blocks
  9. Horizontal Accordion

Horizontal Accordion

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.

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, allowing the user to search with instant FAQ filtering with advanced features. For details, click 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.