Elementor - Accordion Slider Revealing Content - with No Plugins

[@comleonmoto]

Another fantastic trick, Imran! I've just tested it and it's great. I still have to find a nice turnaround for mobile, but on PC, it's amazing!

[@websquadron]

You can do it!

[@ziziphus_skin]

Complete newbie here and you made it so easy to follow even for me. Thank you SO much!

[@ziziphus_skin]

I finally got around to making it and it was perfect on Elementor (pro version). I felt amazing! Then once I clinked Update, it looked wrong on mobile and desktop. I had 4 columns and in the mobile they became squares. In the desktop, there is no overlay. I did notice that the section css in the video and what you put in description were different. I used the one in description. Could you please help?

[@DomCos78]

Very cool build bud. The only thing I would suggest from an aesthetic point of view is the transition timing of the vertical title when you go off a tile as it shows over the tile title for a split second. And if you pair this with horizontal scroll, it may still work nicely on mobile.

[@websquadron]

Good point there about the transition. I'll tinker with the code and update once done.

[@resolve360]

In the code by Imran, search for this code i.e.: selector .straightheader{ opacity: 0; transition: 0.5s ease-in-out; } Now in this just remove - " transition: 0.5s ease-in-out; " so it will be like : selector .straightheader{ opacity: 0; } Thats it...Done ;)

[@danplumadore647]

This is sooooooo timely. I was thinking of doing something for my own site. Thanks so much, mate!

[@websquadron]

Go for it!

[@xDwTz]

Going to try this - thanks for your live stream yesterday, really enjoyed it and lots of good info

[@websquadron]

Glad you enjoyed it :) This code and getting it to work took lots of trial and error, but follow the code instructions in the description.

[@jackiemasek8302]

Oooh! That’s pretty. I’m going to try this first thing Monday morning.

[@websquadron]

Have fun! Please do refer to the description with the codes to use as they are modified from what I used in the video, but the same method.

[@JuanSanchez-nd2nx]

Hi! can someone give me some tips about how to solve this problem? I have applied the css code to the column but doesn't apply the opacity , the code is making disappear the text but doesnt affect the style of the background!

[@michaelclark3840]

This is great. Lots of work put into this! I tried it out and ran into the same issue as another use of the background overlay only showing on the back-end, not front-end of the site. Ran through the columns and removed the overlay to 0 without success. Tried to diagnose some more, but with no luck. Any possibility a recent update caused a conflict of some type on this?

[@websquadron]

Hi. It's weird because I don't get those problems, and there could be something else that affects it. Pity that Elementor don't provide stuff like this straight out of the box.

[@user-dj8gt6ik7c]

Same problem here! Would also love to see a delayed transition if possible!

[@alexmyth1109]

Amazing!!! Just looking for it!

[@joeyhensley18]

Love this effect! I was able to reproduce it fairly easily except for one thing. In the example, you have very short headings. I have some large headings for a course catalogue and instead of it being in one straight line in the rotated heading, it seemingly arbitrarily puts line breaks in so it's in 3 lines instead of one. Did I miss something?

[@websquadron]

That’s where long descriptions don’t always work well for this method. Have you seen our alternate method? kzbin.info/www/bejne/b4fZg2aodpVsZpofeature=shared

[@stellababy1998]

I love your videos! Do this still work with current Elementor? I seem to be having issues with it, like rollover affecting all columns, and text flickering.

[@websquadron]

I have an alternate better way now. Search for accordion reveal

[@stellababy1998]

@@websquadron Oh wow! Thanks so much. Keep up the great work. I always end up using your methods. Brilliant!🤩

[@fidelisagency6015]

Hey great video ! I have a question : does the same code apply to the method wight flexbox containers ?

[@websquadron]

I have an alternate vid fro that: kzbin.info/www/bejne/b4fZg2aodpVsZposi=67nqackPLd-0B_os

[@corinagrether]

Hi Imran. Thank you that was exactly what i was searching for. But it seems that there's an issue with the flex-containers. My containers are creating kind of conflict blinking and not reacting well. I've tried your tutorial instead with columns and sections, with containers.

[@websquadron]

I’m not sure this method is that good anymore due to the containers too

[@corinagrether]

Hi imran. Yes i suppose it’s a container issue. So sad 😢 but well I’ll will seeking out now for new adventures and a different solution. Thx anyway!

[@tdiddier2726]

On your new video, how can you make the accordion tab (item 1, item 2, item 3) an image? So user clicks an image to expand. Thanks for all your awesome videos!!!!

[@amrfarrouh]

Very Very Cool , I tried it and its really amazing

[@websquadron]

Great 👍

[@dkass465]

Thank you so much for you clear instructions ! Question, everything went really smoothly BUT, I tried adding a Text editor block and now when hovering over the columns, the images get really large, do you know how to fix this?

[@websquadron]

Is the image set as contain or cover?

[@dkass465]

@@websquadron cover, when I remove the text Editor, it works (if I add the text editor to the first column, the rest of the columns when I Hoover over them expand the columns heights)

[@joeyhensley18]

Having the same issue. Did you find a solution?@@dkass465

[@wpeasy]

Great content as always. Love the simplicity.

[@websquadron]

Much appreciated!

[@ajitjadhav9040]

You are the one who would help me ... I had Normal accordion but I want the content blank for first for second I had content how to do it

[@websquadron]

You could leave it blank and add some code to leave it closed.

[@ajitjadhav9040]

@@websquadron yes but how to do it

[@websquadron]

@@ajitjadhav9040 See this: kzbin.info/www/bejne/r5TRdZmLfJaNmKs

[@BeppeRoncari]

Hello, how can we do this now with flexbox containers, since Elementor does not support columns anymore? I just need to build a before-after slider, actually, but I seem to be unable to achieve that without any extra plugins. 🙂

[@websquadron]

You can still use Sections on a Container site, by copying over a Section. To make this work with Containers would require some effort from me to look into, and one day I will.

[@arnaudgauthier990]

and by the way the default state is not showing the overlay... on the preview. but it shows in the elementor editor... not sure why?

[@websquadron]

Have you got any optimisation enabled ?

[@arnaudgauthier990]

@@websquadron I got it to work... is there a way to make one of the window opened by default?

[@arnaudgauthier990]

I can see quite a few peeps asked you the same question 😉 if you find a way then great!!

[@Madgiga]

When tried this all went well when editing the section regarding the opacity , but when I preview the page the opacity turns to 0 even though the CSS is well inserted as you did , weird issue here, if you can help me. Thanks

[@websquadron]

Are there any other settings overriding it? Did you add !important

[@Madgiga]

I think I don't have anything overrinding sice I did the page from scratch with your guidence. Where should I add !important?@@websquadron

[@tareknnassar]

is there a way to have 1 column open by default, like an default active columns?

[@websquadron]

Usually the first one

[@tareknnassar]

@websquadron I mean how is it done?

[@erolsoyturk4379]

@@tareknnassar @websquadron im also wondering how to have one column open by default...

[@AlexGoodmann]

Thank you very much for the video. I watched it carefully and pasted all the css codes as you specified. Unfortunately it didn't work for me. Could the reason be related to elementor? Do I have to work with Elementor Pro?

[@websquadron]

I have another alternate way. kzbin.info/www/bejne/b4fZg2aodpVsZpofeature=shared

[@jesusenmanuelbarreto844]

Amazing! Loved it!. Just wondering how can I get horizontal columns instead of vertical columns effects on mobile?

[@websquadron]

Not tried it myself, but if the columns were made 100% on the mobile view, then maybe it might work.... maybe....

[@jesusenmanuelbarreto844]

@@websquadron made it. thanks!

[@websquadron]

@@jesusenmanuelbarreto844 Yesssssss!!!!!! :)

[@Waynot_]

@@jesusenmanuelbarreto844 Hi ! can you share how you did it pls ? ty :)

[@jesusenmanuelbarreto844]

@@Waynot_ absolutely i'll paste the code

[@kellychoo1707]

i tried adding a textbox in each container but the text keep shifting as in from 5 lines to 3 lines as the accordion opens up, is there any way to fix it so that the text does not keep shifting like that?

[@websquadron]

Is the text lengthy?

[@kellychoo1707]

@@websquadron yes it is, like a small paragraph almost

[@genethompson9154]

Imran, love this, great tutorial for a non-coder... Two things... where does the @media go? Also, is it possible to have the first window open by default?

[@websquadron]

A good point about the first open immediately. Not sure about that. The @media goes at the start. Thus: @media screen and (max-width: 480px) { body { THIS IS WHERE THE NORMAL CODE GOES } }

[@genethompson9154]

@@websquadron Thank you Imran. Much appreciated, I’ll let you know if I find a way to get the first window open by default

[@saudpardesi2814]

Hey, did you find any solution for this? How to make first column open by default?

[@dileepbatchala1590]

@@genethompson9154 Did you find any solution, if yes please share

[@SM.Touhid.Sultan]

same thing can possible for Vertically as well?

[@websquadron]

See this alternative method; kzbin.info/www/bejne/b4fZg2aodpVsZpofeature=shared

[@SM.Touhid.Sultan]

@@websquadron This is not what I am looking for. I am actually asking is it possible to do this effect from top to go bottom just like its doing left to right

[@pete-houghton]

Its a brill tutorial and something that I was looking for,,, It looks great on pc, tablets but not so on mobile, unless you have about 5 columns as the space on vertical mobile phone layout is reduced somewhat. This tutorial is for the columns within one section... is there a way for to have the same thing vertical for mobile phone view using rows?? For me, I had to go into the advanced settings in Elementor and then > Responsive > and then check 'Hide on mobile' I then need to do another section specifically for mobile (hide on desktop/ tablet. So, can I do a vertical accordion with rows, in the same manner?

[@websquadron]

In the comments someone did add some advice about doing it as vertical but I’ve not checked that out.

[@pete-houghton]

​@@websquadron Thanks Imran for getting back; I did try various options and created a section and created rows and tried it, following your instructions (omitting vertical/ rotate instructions and classes ) but it wouldnt work as neatly as the horizontal instructions you presented; instead I had to revert to the 'toggle' internal plugin ; but that just left with text to click on and then the pic revealed which didn't look very presentable or as good. in the end , I had to revert back to your instructions and reduce how many columns in each section. For a comfortable presentation on mobile phones; I found that a max of 5 columns more comfortable viewing: 6 at a push. I had to copy and paste 2 more with columns and change pics for additional books; as can be seen : The only problem I encountered, is that the pictures when hovered over, enlarged somewhat... 'centre centre' produced thumbnail images of about 150x150,, Top Centre left the top section of the pics for viewing.. - so i couldn't view the whole image when hovered over; bookstore.pete-houghton.uk As always thank you for your videos and working so hard to produce loads of easy to follow and informative video instructions..

[@JECruceristas-mkt]

Hey I follow step by step and works perfect in editor, buuut in preview dont open the images, and dont do opacity in "rotate", and its like the css tried but no "straight" just make kind of pop... but the content in this shows perfect pls help Thnks a lot!!

[@websquadron]

I'd have to see the site and how it's built but that is paid consultation. Sorry.

[@user-dj8gt6ik7c]

This is fantastic. Thank you!!

[@Theotsi7]

I have an issue/question: I don't have Elementor Pro so I'm trying to follow all steps by adding HTML with the "" for CSS instead. Everything seemed to be working until the step where I have to put custom CSS to hide the Straight Text - it doesn't get hidden. Any tips?

[@websquadron]

Are you using class names to identify the right element. I recommend that you get Elementor

[@Theotsi7]

@@websquadron I managed to pass through that problem, yes, thank you for the response anyway, I really appreciate it!

[@Theotsi7]

@@websquadron subscribed!

[@dileepbatchala1590]

Hi, how to make one accordian opened by default. Its really hepful for me if anybody gives a solution

[@Uncaught_in_promise]

Can I create this using Elementor Free? I have skills in css and I can add css via custom css file in theme because i have access to wen hosting

[@websquadron]

May be extra work for the accordion

[@rjarboleda]

It's not working for me. I followed it correctly and it works fine in edit mode but when I am in view mode it doesn't show correctly...

[@websquadron]

Could be due to optimisation plugins such as aggregated JS or any other css

[@SasiprabaharanS]

so Imran morning :)

[@jumes_20]

How can one adapt the css to function in the container environment?

[@websquadron]

I’ll be doing updated videos soon.

[@bymalpica]

Great design, awemoe result! When not hovered, shade is applied in backend but... it doesn´t work on frontend. Instead of that, I use .elementor-widget-wrap and then, shade is correct but text doesn´t appear. Any suggestion?

[@websquadron]

Hi. Difficult to assess without seeing what you have built.

[@websquadron]

@Fabian Köppe It’s odd because I don’t get that problem at all.

[@bymalpica]

@@websquadron @Fabian Köppe it is kind of weird. Could I reach the same behaviour with the native background options in section? Any other proposal?

[@websquadron]

@@bymalpica Can I be so bold in asking you to email me [e-mail] to have a quick look at your section? Or you could export as a JSON and email that to me?

[@websquadron]

@Fabian Köppe All you have to do is… Per Column, go to Style, and go to Background Overlay. Even though the Overlay is applied inside the CSS, still click paintbrush, and ensure the 0.5 value is deleted to be blank. Do that per column :)

[@ittechthien]

cool job. Can you make it as slider when in mobile mode

[@websquadron]

I wouldn’t recommend due to sizing

[@ziziphus_skin]

I finally got around to making it and it was perfect on Elementor (pro version). I felt amazing! Then once I clinked Update, it looked wrong on mobile and desktop. I had 4 columns and in the mobile they became squares. In the desktop, there is no overlay. It is not a caching problem. basically NO ACCORDION :( I did notice that the section css in the video and what you put in description were different. I used both in description. Could you please help?

[@websquadron]

The css in the description is slightly tweaked to work better. For the mobile it needs to be modified to work and look better due to the different screen size. Someone added some modified code below.

[@GetTennisBar]

Amazing and informational

[@websquadron]

Glad you think so! :)

[@JulieJohn2015]

Love love love this!

[@websquadron]

Awesome!

[@gigabite9815]

Thank you sooo much bro

[@ecomebusiness8225]

I really liked the visual and everything works fine until I add some text, then everything goes to hell. Yet I followed everything in detail Don't know why ???

[@websquadron]

Adding Text Editor will cause the Columns to increase in height. Make sure that you: 1. Give it the Class Name = straightheader 2. Add this into the Custom CSS for the Text Editor: selector {white-space: nowrap;} selector h2{ pointer-events: none; } 3. And if you have long Text in there, then add to add returns. eg: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. See the above at the end of Line 1 and 2 And it will be fine.

[@ecomebusiness8225]

@@websquadron Hi Imran I know it's very late for you. I'm really sorry It works better than before but now the Rotate Header just appears halfway through. Please help

[@websquadron]

@@ecomebusiness8225 That could depend on how you’ve added it or which class it’s got. Difficult to assess without going into your site but we do charge for that. If you’d like us to go in then contact me on [e-mail] - though please remember that it won’t be for free.

[@ecomebusiness8225]

@@websquadron i know nothing in life is free

[@ALYURA24]

Tutorial Coraseoul Center mode please Crocoblock-advanced coraseoul

[@websquadron]

Thanks but we don't use Crocoblock.

[@ALYURA24]

Tutor elementor please

[@websquadron]

@@ALYURA24 can you clarify exactly what you’d like to see ?

[@nurekerey]

You forgot to mention that custom css comes with the paid version

[@websquadron]

That’s because it’s mentioned in previous documents and online for EL and EL Pro.

[@websquadron]

Plus my cover art does indicate El Pro