Tab to accordion

DIV ID tab_wrapper
_TABS
_TAB CONTENT

CSS

@media (min-width:521px) {
	
	.oxy-tab-content {
	animation: fade-in-zoom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	overflow: hidden;
}



@keyframes fade-in-zoom {
	
	0% {
		opacity: 0.9;
		transform: scale(0.97)
	}
	
	100% {
		opacity: 1;
		transform: scale(1)
	}
}

}




@media (max-width:520px) {
	
	#tab_wrapper{
		gap: .3rem
	}	
	
	
	.oxy-tabs-contents-wrapper, .oxy-tabs-wrapper {

		display: contents !important;
	}
	
	

	.oxy-tab, .oxy-tab-content {

		width: 100%;
	}
	

	.oxy-tab-content { 
		margin-top: -0.3rem;
		max-height: 1000px;
		transition: max-height .4s;
		overflow: hidden;
	}

	.oxy-tabs-contents-content-hidden {
		display: flex !important;
		max-height: 0 !important;
		overflow: hidden !important;
		padding: 0 20px;
	}

	.oxy-tab-content > * {

		transition: opacity 2s;
	}


	.oxy-tabs-contents-content-hidden > * {
		opacity:0 !important;
		transition: opacity 0.4s;
	}
	
}

JS

				var tabOrder = 0;			
				var tabs = document.querySelectorAll('.oxy-tab'); 
				var tabContents = document.querySelectorAll('.oxy-tab-content'); 
				
		
	// loop through each tab
				tabs.forEach(tab => {
					
					// get tab parent					
					var parent = tab.parentNode;
					
					// get index (order number)	of each tab				
					let index = Array.prototype.indexOf.call(parent.children, tab);
					
					
					
					if (index == 0){
						
						tabOrder = index;
						
					} 	else {
						tabOrder = index * 2;
						
					}					
					
					tab.style.order = tabOrder;
					
					
							})
				
				
				
				
	// loop through each tab content
				tabContents.forEach(tabContent => {
					
					// get tab parent					
					var parent = tabContent.parentNode;
					
					// get index (order number)	of each tab				
					let index = Array.prototype.indexOf.call(parent.children, tabContent);
					
					
					
					if (index == 0){
						
						tabOrder = index + 1;
						
					} 	else {
						tabOrder = (index * 2) + 1;
						
						
					}
					
					
					tabContent.style.order = tabOrder;
				
							})


			

其他文章

envelopemenu