- Add this CSS Code to your Divi, Theme Options, Custom CSS.
#responsive_section {
display: none;
}
- Add the following JS code to the Divi, Theme Options, Integration, <HEAD>. Be sure that you have “Enabled” the header code.
<script>
jQuery(document).ready(function($){
$(“a.responsive”).click(function(){
$(“#responsive_section”).show(1000);
$(‘html, body’).animate({
scrollTop: $(“#responsive_section”).offset().top
}, ‘slow’);
});
});
</script>
Go to the Page that you want the hidden Section to be on and create the following.
- Create a Standard Module Section with a single column
- Add a “Text” module to hold your “button” or “link” that you will use to open the hidden Section.
- Create your link in the “Text module you added earlier, assign it the ‘class’ of “responsive” which tells the JS to open the hidden section.
- Example: <a class=”responsive” href=”#”>Click here to open the hidden section</a>
- Create another Standard Module Section and assign it a “CSS ID” of “responsive_section” which relates to the CSS code below. You can put whatever you want in this Section, this is what’s hidden until you click the link to unhide it.
This is the hidden bit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.