Divi "Read More" Button with jQuery - Reveal a Hidden Section on Click

This is a Divi tutorial on how to easily reveal a hidden section on click, so for example using a "Read More" Button. We'll be using jQuery.
If you'd like to follow written instructions or easily copy and paste the code snippets, you can find this written tutorial here: divilover.com/...
I hope you found this video walkthrough useful and easy to follow. Don't hesitate to give me a comment with your thoughts!
Best,
~ Ania

[@marinabouchet-skalka5672]

That was the first time of my life I did code and that worked first time ! I'm so proud ! Thank you so much !

[@aniaromanskacom]

Yeah, you go!!!

[@tzatzum]

Love your videos! Great stuff for me! I'm a learning Divi machine.

[@aniaromanskacom]

Great to hear! Rock on :D

[@juliorodrigues1456]

This little bit of code Worked great on Gutenberg! You should do a video on that, couldn't find any video on how to do this on Gutenberg! Great work 😁

[@aniaromanskacom]

Thank you, great suggestion!

[@opledulnuan5036]

Thanks for this, do you have a tut on doing this for a gallery module?

[@electrolite357]

do you have css for unhide section with down arrow button and hide section with up arrow button and the button is not hidden.

[@JfDesigns]

I was curious how the query slideDown also reset the "display:none" css that was applied to the section. I would have assumed I would have needed to add a jquery css change of "display: block" before applying the slideDown. I just learned something . Thanks!

[@aniaromanskacom]

All jQuery methods for showing things (show, slideIn, fadeIn) will add that display:block for us, so we don't need to worry about it :-) I'm glad it was helpful!

[@audrey3901]

Thank youuuu

[@BarnabasAdedoyin]

Lovely, I will use it for my present design. Thanks greatly, Ania. Any snippet for button pop-up that works like Divi Overlay?

[@aniaromanskacom]

Glad I could help! As for your question, I'll have to add that to my long list of snippet and tutorial ideas :-) Thank you for this suggestion!

[@skeptimedia1093]

Ania, thanks so much for this but can you please make carousel for modules in Divi?

[@aniaromanskacom]

Glad you liked it! And thank you for the suggestion, I am adding it to my ever-growing tutorial ides list ;-)

[@sergey_zatsepin]

So, there is no way to make it without JavaScript? I mean to do it only with divi builder modules somehow? And if I wanna realize expand/collapse functionality for read more links, I can only use jQuery?

[@aniaromanskacom]

You can also use Toggle or Accordion module.

[@sergey_zatsepin]

@@aniaromanskacom Oh sweety, thx for comment, but I found ez solution with shortcodes by wp-showhide plugin

[@arminios78]

Hi Ania, nice and simple tutorial with a bug for me: when I want to place the code for displaying the hidden content in visual images (body:not ...), I can not save changes or can not close the visual builder without saving. I have tried the code on the website (in code module), on divi options (integration) ... all the same ... with this code I can't save anymore. I also tried with a single module ... also not! With the simple code "display:none;" ... is works fine ... but it is annoying that in visual builder the sections/modules aren't displayed. Any suggestion?

[@aniaromanskacom]

Instead of using the :not selctor, you can try overwriting your own CSS this way: body #more { display:none; } body.et-fb #more { display:block; }

[@arminios78]

@@aniaromanskacom Hi Ania ... great that works!!! Thank you very much

[@andrzejrozycki2135]

That hidden section is awesome. However if you apply it and you have some scroll effects underneath hidden section, it affects them, and kills all the effects below. Any ideas how to fix this?

[@aniaromanskacom]

Can you share an example?

[@andrzejrozycki2135]

123

[@andrzejrozycki2135]

@@aniaromanskacom athletic training pl

[@aniaromanskacom]

@@andrzejrozycki2135 I've tested this and unfortunately, couldn't find a solution. The scroll offset is calculated based on the initial lenght of the page, once the hidden section is revealed it breaks the effect. I'm afraid it's either one or the other with this approach.