Build an Elementor Horizontal Accordion for FREE with NO Extra PLUGINS

[@daveden2]

Unfortunately, this trick will no longer work for the nested accordion in v3.15 because it uses the tag, which doesn't support flex properties like flex-direction. I'm still exploring other options, but it might be easier to rely on a third-party plugin now.

[@TicklePickleLover]

fucccck lol, i just did have the work and read this comment

[@daveden2]

@@TicklePickleLover my sincere apologies 🙏 I'm still exploring ways to make it more flexible using containers while following keyboard accessibility standards, but it's proving a bit difficult at the moment.

[@stellababy1998]

Did you find any solution Daveden? 😊

[@daveden2]

@@stellababy1998 Hi, sorry I haven't looked into it. I'll take another look at it soon.

[@CoopDeGracie]

Have seen other tutorials using plugins, but this is exactly what I was looking for! Thank you.

[@presley_yt]

This is EXACTLY what I have been looking for! Thank you!

[@comeandsense4902]

Thank you, you are a champion! Can I also do this for a drop down menu on the side?

[@peonza126]

I love the video

[@PMNetworks]

Thanks Bro!

[@CaterStudios]

Pls is it possible for me to create sub region shipping fees for woocomerce

[@daveden2]

Have you checked out this link: wordpress.org/support/topic/how-to-create-custom-shipping-regions/

[@CaterStudios]

@@daveden2 oh thanks so much, I’ve seen it, is there a video guide on how to use it, cus I don’t get it clearly.

[@user-dj8gt6ik7c]

Great video!!! Thank you so much. Is there anyway to switch the Headline text so it reads from bottom to top? I tried using: writing-mode: sideways-rl; with no success.

[@daveden2]

you could simply add a transform: rotate(180deg). .dd-accordion--h .elementor-tab-title{ transform: rotate(180deg); writing-mode: vertical-lr; }

[@GOLDBOYRJ]

please upgrade to flexbox container as the classes are different and the css code doesn't work

[@daveden2]

Thanks for watching the video! The code still works pre-Elementor 3.15 as you can see in my demo - ele-templates.daveden.co.uk/tut-demo/horizontal-accordion-demo/. The class names willl change slightly in Elementor 3.15, with the new nested accordions. But I'll definitely look into updating the tutorial. Do you have any other tutorials you would like to see?

[@developerops3847]

Hey i want to change the accordion animation and make left to right and a bit smooth and slow

[@daveden2]

hi! Thanks for checking out the video. Unfortunately, that's one limitation with using the native Elementor Accordion widget because the animation is done using JavaScript, it's difficult to override. But I'm currently working on a tutorial to use Elementor's containers instead to get more flexibility.

[@a2ngondrong]

the css snipset link isnt working, it's 404

[@daveden2]

My apologies. I've updated the link - daveden.co.uk/tutorials/build-an-elementor-horizontal-accordion-using-no-addons/ I'm looking into an updated method as well. But I'm currently holding off until Elementor releases their Nested Accordions. I'll keep you updated

[@daveden2]

Do you find horizontal accordions useful in your design?

[@zerobambiro]

Wondering how this worked on mobile :D

[@daveden2]

Previously, when the code worked, it'll simply reset back to the standard vertical layout for mobile. Unfortunately, Elementor has switched to using the modern tag, which doesn't support using flex and grid properties. I ended up creating my own horizontal accordion widget, which I showed here kzbin.info/www/bejne/rZy6mX5ni9xkfM0 But that isn't ready to be released to the public

[@franktielemans6624]

Very clever use of the accordeon functionality. I build a horizontal accordion as well long time ago in Elementor; but this is much easier kzbin.info/www/bejne/qYDZgJubgLKZl68&

[@daveden2]

This method is suitable for simple accordions, but I find that Elementor's default slide-up animation gets in the way