How to Create a Responsive Accordion Slider In Divi

[@redmountainfiresecurity215]

Thank you for this. Works perfectly. The magic really comes out when you put it into a specialty section. You can also adjust the size of the accordion flex by increasing that number from 5 to whatever you need, otherwise you might get edges cut off on your images. Do a height adjustment in row settings and you should be able to get to what you're looking for. The only thing its missing is autoplaying videos on hover. If you add videos, they just go and we can't get that to work. Otherwise, this is fantastic work.

[@MalMilligan]

Really IMPO the consistently best tutorial videos on Divi. Lots of details covered here that anyone might otherwise miss the first time around. Thanks !!

[@sachendeslebens]

You are incredible. I always find my questions answered in my video! Thank you!

[@mappi8501]

Grande Mak! Your tutorial are always a must watch. Thank you 🙏

[@lnazfamkar1651]

Any luck in making it work? i did the exact things was mentioned in both video and article , but as others mentionedit doesn't work and i just have a few blurb modules in horizontal rows. would you help me with the solution please

[@Juan-nz7cl]

For those who can't make it work... You have to place "flex: 5;" code, not in the tablet section of each blurb, but in hover option, and that's all.

[@Juan-nz7cl]

For those who can't make it work... You have to place "flex: 5;" code, not in the tablet section of each blurb, but in hover option, and that's all.

[@themindstripper]

That did the job for me, thank you so much. But I also had to do another thing for it to work. I removed the css of the row's blurbs and put it the column's row's blurbs. May be it was because I use a custom theme, but that was the only way it could work for me in the end. Cheers!

[@Aditya-rb1dt]

when I duplicate the blurb 08:02 they stack up horizontally instead of stacking up vertically. Please help

[@elegantthemes]

This is because of the display:flex property which which I believe is added to the column. It aligns all the blurbs horizontally.

[@michaelanderson7369]

@@elegantthemes i have purchased the theme but it seems, everything is vague, so what should be done after to fix the problem. Ive followed all the steps and it does not work.

[@ritafarsoun9748]

@@elegantthemes so what do you do to fix this. Everything is exact how its done in the video/blog and they are stacking over each other

[@jonatanpg6441]

Hello, excellent tutorial but I have a problem. I did everything you say in the video but the accordion effect doesn't work. The images are still static without enlarging when I mouse over them. Do you have a suggestion?

[@EricTrice]

I have tried to get this to work multiple times. This doesn't work even with the instruction on the Elegant Theme website. Could you please provide a fix?

[@matteograndi7518]

Nice really usefull, I'm trying to get the tablet/phone view also on desktop. Is it possible? any suggestion/idea?please help

[@IterasViridis]

thanks for the info, i have a problem with this module bro because when the pages load all the animation play at the same time and not when the mouse cursor is over

[@yogishankar1]

Superb !!!. Thanks for sharing this...

[@ClaudiaOrtiz-iu8sw]

Thanks for your video! I am about to decide which theme to purchase for my website and I would like to buy Divi from Elegant Themes because of an accordion as the one in the video. Is it possible to add buttons below the text of each blurb? Thanks a lot!

[@MirkoMancini]

File json can't be imported into the library, I got an error, maybe it's not compatible anymore with the last version of Divi in 2021?

[@elegantthemes]

You can Import it by opening a Page in the Divi Builder and then using the Portability Tab, as shown here: d.pr/i/KVoWrF. If that does not work for you, I recommend that you create a ticket with our Support Team via the Members Area: ow.ly/9wXh30rEZvc

[@MirkoMancini]

@@elegantthemes ok, thanks

[@Pingwinable]

It does work on desktop, but the video must be completed by the blog tutorial especially concerning the flex on hover. I removed the title, the text and the icon, added some height but kept the gradient on hover to trigger the effect of expanding background. I haven't tried yet on tablet nor mobile

[@JoseRCamargoG]

Sorry could you explain again for beginners pleas

[@elegantthemes]

Maybe check out the blog post for a more detailed explanation... www.elegantthemes.com/blog/divi-resources/how-to-create-a-responsive-accordion-slider-in-divi

[@brianholstein1810]

This is a great blurb! I've tried to add a button to each blurb but they aren't behaving like the text when it comes to the transparency/hover effect. I'd like the button to turn white when the blurb is hovered on, right now they are only visible if you hover on the button itself. Does anyone have a workaround for this?

[@coltenroderigue7039]

I'm having a hard time with adding a gradient background overlay on hover. I don't have the options to: set the gradient direction or Place Gradient Above Background Image: YES Help.. Anyone?

[@aijazahmed6381]

when I duplicate the blurb they stack up horizontally instead of stacking up vertically. - same issue - Please help

[@guyalainfahe1021]

I think you have to split your row (the green one). After that, move duplicate to the right place

[@itspraveensharma]

Awesome Mak...

[@elegantthemes]

You're welcome! 😄

[@Serkan_Durgun]

Has anyone been able to make this work on smartphones? I somehow managed to work it on desktop, but in mobile it just does not wanna work.

[@patricioa.henriquez265]

Didn't work, following step by step, even using all information on the link you provide, but nothing happens. Blurs stock one over another verticaly, but not horizontaly.

[@patricioa.henriquez265]

kzbin.info/www/bejne/d2e4m4OcftOBoMU&ab_channel=OVDIVI this explain better. Is in spanish, but it works fine.

[@chandlerkeller6459]

did anyone get this to work for mobile?

[@BK-Media]

Followed this perfectly, word for word, click by click and it does not work properly.

[@sgthomas98]

Brilliant!

[@amitchoudhary9638]

Please make a video for beginners to explain all modules and sab modules, so understand better

[@elegantthemes]

You might want to check out the documentation if you haven't already... www.elegantthemes.com/documentation/divi/modules/

[@vale.lasarda]

For all who's wondering, i just found that this tutorial doesn't work because in the video it looks like the code is being inserted into the row module, instead you have to insert it into the column one. Hope this can be useful to someone

[@lauriejbradley]

THANK YOU!!! So much wasted time trying to get this to work. :( Your solution worked for me!

[@maxwiese7666]

THANK YOU! Finally made it work with your solution.

[@jamescunningham7500]

Mak, you're usually Excellent. But here you just created a blurb module, and didnt show us how to create and design the accordion module. Can you do a video showing us how to do that? Your accordion module is very different, and better, than the one one ET's video. Thanks.

[@elegantthemes]

Sorry for the confusion. This isn't an accordion module at all. This is a completely custom design using blurb modules in a unique way.

[@FadiAlamAldeen]

I love it

[@asquareful]

did not work for me

[@rossishikawaatsplainers3142]

These videos would be more helpful if you explained WHY you are changing the settings and what those settings mean. You just rush through the steps to make a specific page, but without giving any context for your moves, you don't give enough information to apply it elsewhere.

[@JonathanShannonfrizzysites]

Okay, I must get dumb dumb of the week. I have tried 4 times to do this and nothing :-(

[@elegantthemes]

Our support team would be happy to help you with that! Just open a chat and the help is on its way. www.elegantthemes.com/members-area/help

[@JonathanShannonfrizzysites]

@@elegantthemes Going to try it again today. This feature will highlight well for types of classes for your Yoga Theme.

[@Juan-nz7cl]

@@JonathanShannonfrizzysites For those who can't make it work... You have to place "flex: 5;" code, not in the tablet section of each blurb, but in hover option, and that's all.

[@tusharuddin1666]

sorry but first time maybe i am dissapointed from you

[@helenaplath6331]

Dear Elegant Themes Team PROs, could you just please be so kind, to tell everyone here how it works properly? Everything I followed MAK and corresponding your documentation, but when it came to enter advanced CSS suddenly something went wrong. All I am asking for is a little answer I can work with. I have just promised a customer that he will get this accordeon. I think we all beliefe in you, why are you hiding a PROPER answer on this? Kind regards from Germany

[@Pingwinable]

have you put the flex property at 5 (if you have 5 blurbs) on hover right in the main element box ? I tried three times before succeding, it's quite a hard one