This post is more for my own reference. If you are interested in adding something like this to your own page I recommend consulting with me first, as this code might need to be adjusted for you design.
The general setup is quite simple. We need need to have 2 rows per group. Inside the first group we have the “button” – the Module Class sound be “open_button”.
And the Class of the second Row should be “close_row”.
The following code then needs to be added to the <body> in the Divi Theme Options -> Integration
<script>
jQuery(function($){
function closeAll(){
$(".close_row").css({
"max-height":"0px"
});
};
$(".close_row").css({
//"display":"none",
"max-height":"0px",
"overflow":"hidden",
"transition": "max-height 0.5s ease-in-out"
});
$(".open_button").css({
"cursor":"pointer"
});
$(".open_button").click(function(){
closeAll();
var row = $(this).closest(".et_pb_section").find(".close_row");
if(row.css("max-height") == "0px"){
row.css({
"max-height":"1500px",
});
var open_elem = $(this).closest(".et_pb_section");
setTimeout(function(){
console.log(open_elem[0]);
open_elem[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
},500);
}else{
closeAll();
}
});
});
</script>