Vertical Accordion with No Code & No Extra Plugin - Nested Accordion - Elementor Wordpress Tutorial

[@websquadron]

Here's how to stop the shrink at the end when all Tabs are closed. Assuming that your Accordion will be 400px as height when displayed. Order of Build = Parent Container = Accordion Parent Container set to 540 Minimum Height and not 400px. The 540 is based on the height of the accordion when the Accordion Rotate is deactivated. Use a PIXEL Ruler to CMD+SHFT+5 to get the Mac Measure.

[@OliverTurley]

Is there a formula to figure this out with different sized accordions? Unsure what you mean about using the pixel ruler

[@gastonhenrich2492]

i had the same idea and tried it a couple of days ago and couldnt make it work , you re a legend!! keep the great work

[@ellaaudreyrae8501]

OMG THIS WORKED LIKE A CHARM, YOU ARE A LIFESAVER. I HAVE BEEN LOOKING FOR THIS SO LONG.

[@websquadron]

Nice one !

[@QuaverloveStudio]

Using this right now! Literally! Thank you, Imran. You know... you should really be awarded an MBE (Master and Brains of Elementor).

[@QuaverloveStudio]

Tell you what would be brilliant... being able to make it so the the accordion cannot totally collapse, i.e maintain its width. So clicking on an open tab would close the associated 'tray' and open the one to the right of it (or left, if you're on the far right... no pun intended). Can you do a video to demonstrate that, please? (Roger Rabbit style)

[@astronautamecanico]

incredible. I've been thinking about this for days. beautiful work.

[@markbratton111]

I am not sure at which point that I will use these great tips of yours BUT... they certainly open my mind and knowledge of how Elementor works and can be manipulated. Great job!

[@websquadron]

Excellent! You’ll use them one day

[@pavosdijital414]

Thank you so much for these great videos. I learn so much in a very practical way ♥️

[@asianaddict4614]

Thank you for this explanation video which is awesome. I have done this in desktop mode but in mobile device it s not showing properly. Is there any other ways to adjust it.

[@elementhow691]

Great work Imran!

[@ath1870]

First off, huge thanks for your help so far, it's been really appreciated. I've hit a bit of a snag though-I'm trying to make the accordion full width, with the headers beign 900px, the items having a width of 1280px and the height would be 900px tall, but I'm running into some trouble. I'm sure it's just a small thing I've missed, but I could really use some guidance. Could you maybe walk me through your example so I can tweak it to fit what I need? Thanks a ton in advance for any help you can offer!

[@websquadron]

I'd love to, but due to the high number of daily requests, I can't unless it's a 1-2-1 consultation. If you're still interested, visit my booking page: learn.websquadron.co.uk/#support

[@unsignedhub]

Thanks for this. Is it possible to add a template that can scroll within the accordion?

[@shanamzzz]

Thank you. Well explained 👍

[@Neithan]

What am I doing wrong if I cannot add a container inside the accordion? ty

[@websquadron]

Do you have the Nested Feature enabled?

[@Neithan]

@@websquadron Thank you brother. That fixed it!

[@ziptalia2456]

your vids are genius. LOVE these vids. if you had to list 15-20 services (with a "buy" button) on a service page - what Elementor "Element" would you use to minimize the page real estate each service takes up? Accordion? Tabs? or something else? Thanks WS! :)

[@websquadron]

I would just show them rather than have accordions or tabs otherwise you're asking them to click-click-click and it makes visual comparison of services difficult.

[@ziptalia2456]

@@websquadron thanks brother… just hard to display that many services in a clean way! lol

[@dan_kay]

I love it! Is there any way to turn the titles vertically, with the text running from top to bottom?

[@websquadron]

Yes I need to dig out the css code

Fantastic tutorial! And if I want the accordion to be full width, how could I do it?

[@websquadron]

Would need some refinement of the build. I may revisit this soon.

[@ElementoryMyDearWatson]

This is great. Would it be worth starting with a regular orientation one, duplicate it and then do all the orientation transitions and just have it on desktop and maybe tablet while hiding on mobile. The 'regular one' would then be hidden on desktop and tablet and would only appear on mobile?

[@websquadron]

Indeed yes. Or some css could be added to control the rotation depending on pixel width

[@Art-01]

Thank u so much for sharing🙏

[@mariabrooks215]

Thank you so much for this! I can't believe it's done with no code or CSS. You are awesome and I really appreciate all these videos!! So just one question, it looks fine on desktop and tablet but on mobile all I see is the first accordion image. I don't see the tabs to click on. In the video you show it on mobile and you stretch the screen, but don't I see how to fix it. I tried changing width of accordion and the container on mobile, but nothing changes.

[@websquadron]

Have you got a URL to share?

[@zionpax8908]

Is the a way to turn tab title to be horizontal?

[@astronautamecanico]

I need to insert long text, how do I scroll the page? thanks :)

[@mishmatta]

which accordion are you adding? When I add my accordion, I don't have the option to add another container?

[@websquadron]

Have you got the nested feature activated in Elementor settings?

[@mishmatta]

You are the man! @@websquadron

[@voxelbook]

how do you add containers inside the accordion elements?

[@websquadron]

Nested feature will allow that

[@MarkoKozlica]

My Accordion does not have the content part separate when looked in the navigator, any idea why? :D Great tuts BTW

[@MarkoKozlica]

Ok, I found in the Elementor settings the beta setting for nested elements, enabled it and now it works, is that the solution? Would like to avoid beta stuff if possible :D

[@websquadron]

It's been beta for ages and is totally reliable :)

[@MarkoKozlica]

Thanks for the confirmation :D I have solved it in the meantime with custom code :D@@websquadron

[@miguelseijas2719]

Esto está estupendo. Gracias por compartir.

[@maneetchaudhary8886]

How to make this full screen?

[@websquadron]

Would need tinkering with the sizes

[@WordpressDeveloper-k8e]

very helpful

[@nidarahman2305]

pretty cool

[@jamdajao]

It doesn't work if slide container is not a square, like width is 600px and height is 400px

[@websquadron]

That's where it needs to be refined as per your sizes.

[@jamdajao]

@@websquadron can we do it now or waiting for an update from Elementor? Each slide's height won't extend according to the height of the slide content.

[@davorkrklec8323]

🎉Yes

[@cglenn2371]

Still moving when shrinking

[@websquadron]

Depends on the design.

[@cglenn2371]

@@websquadron ive designed it based on your descriptions but okay

[@websquadron]

Here's how to stop the shrink at the end when all Tabs are closed. Assuming that your Accordion will be 400px as height when displayed. Order of Build = Parent Container = Accordion Parent Container set to 540 Minimum Height and not 400px. The 540 is based on the height of the accordion when the Accordion Rotate is deactivated. Use a PIXEL Ruler to CMD+SHFT+5 to get the Mac Measure.