September 14, 2023

Create an Elementor Accordion with Columns using a Simple CSS Addition

Play Video

Ever struggled to create an Elementor accordion with columns? Then you’re in the right place. Imagine having a long accordion and wanting to present it in a more organized, columned manner. That’s the magic we’re about to unfold.

The Common Problem with Multiple Accordions

So, you’ve tried placing two accordions side by side to give that multi-column look. But here’s the hiccup: when you open an item from one accordion, the other doesn’t close. It’s like trying to juggle two tasks at once, and we all know that can be a tad frustrating.

The Common Problem with Multiple Accordions

Implementing the Solution for Elementor Accordion with Columns

Setting Up the Accordion

  1. Begin with a fresh Elementor accordion.
  2. Populate it with multiple items.
  3. Navigate to the accordion ‘Advanced’ settings.
  4. Set the width to a full 100% by setting it to default.
    Navigate to settings and set the width to a full default
  5. Locate the custom CSS section further down the ‘Advanced’ settings and paste the following code.
    selector .e-n-accordion{ display: block; column-count: 2; } 
    selector .e-n-accordion-item{ break-inside: avoid;}

    Source: Daveden

    Locate custom CSS section and paste the code

Visualizing the Transformation

After adding the code, your accordion will elegantly split into two columns. Want more columns? Adjust the column-count in the CSS to your preference.

Testing the Functionality

Click on different accordion items. You’ll notice the seamless transition where one closes as you open another.

Tip: There might be a slight shift when you open different items. It’s a minor quirk, but the overall functionality remains smooth.

Testing the Functionality

Wrapping Up

With just a bit of CSS, we’ve transformed a standard accordion into a multi-columned Elementor accordion with columns. It’s all about making information accessible and visually appealing.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Create an Elementor Accordion with Columns using a Simple CSS Addition
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.