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.
Implementing the Solution for Elementor Accordion with Columns
Setting Up the Accordion
- Begin with a fresh Elementor accordion.
- Populate it with multiple items.
- Navigate to the accordion ‘Advanced’ settings.
- Set the width to a full 100% by setting it to default.
- 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
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.
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.
