Animated opening and closing rows in Divi

by

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>