Making custom tabs in Divi

So this setup is a bit more complicated and fairly specific.
If you are interested in how this works, feel free to ask me about it.
I mainly created this post for myself to easily find the code again 😉

Code to make the section with tabs scroll (mainly interesting for mobile):

Section:
overflow:auto;


Row:
min-width:836px;


Column:
display: flex;
justify-content: space-between;

Adding custom CSS to the page to create “active” states:

.tab_text h3:hover, .tab_active h3{
	color: #78cbbd!important;
	transition: color .3s ease 0ms;
	cursor:pointer;
}

Adding the necessary JS to the body of the page:

<script>
jQuery(function($){
	var sections =["features","reasons","faq","specs"];
	var tab_btn = $(".tab_text");
	var activeClass = "tab_active";
	
	//setting first button of section as active
	$("#"+sections[0]).addClass(activeClass);
	
	//function to deactivate all active states
	function removeActive(){
		tab_btn.each(function(){
			$(this).removeClass(activeClass);
		});
	};
	
	//function to hide all sections
	function hideSections(){
		for(i=0; i<sections.length; i++){
			var section = $("#"+sections[i]+"_section");
			section.hide();
		};	
	}
	
	//Hide all sections, then activate the first section
	hideSections();
	$("#"+sections[0]+"_section").show();
	
	//on click on button remove active class from others,
	//add activa class to current button,
	//make matching section visible
	tab_btn.click(function(){
		removeActive();
		hideSections();
		$(this).addClass(activeClass);
		var id = $(this).attr('id');
		$("#"+id+"_section").show();
	});

	
});
</script>

___