elementor4fun-logo
Last update: July 28, 2018

Tabs with nice transitions

Tab #1
Tab #2
Tab #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sollicitudin, ex sit amet tincidunt aliquet, est ex ullamcorper lectus, eu vestibulum libero velit vitae quam. Donec eget nunc convallis, volutpat quam aliquet, mattis arcu. Mauris tempus sed est eu pellentesque. Vivamus egestas sodales consequat. Phasellus luctus mi vel lacus lobortis posuere. Vivamus non pulvinar lacus. Integer finibus faucibus lectus. Sed dignissim, purus ac bibendum ultricies, felis nulla ullamcorper quam, et interdum turpis velit ac augue. Suspendisse consectetur ex lorem, quis porttitor diam congue malesuada. Cras pharetra nisi varius molestie congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse a odio eu neque convallis eleifend et porta urna. Aenean tincidunt leo leo, non facilisis urna vulputate et. Sed justo enim, ornare vel dictum ut, sodales pharetra ipsum. Cras iaculis ante ac tellus luctus, non scelerisque leo euismod. Aliquam erat volutpat.
Mauris accumsan lobortis fermentum. Maecenas eu feugiat dui, eu facilisis mauris. Pellentesque non malesuada turpis. Donec tincidunt urna nec leo auctor porttitor. Mauris bibendum pharetra tortor at finibus. Duis vehicula convallis ex. Praesent eget elit nec tellus interdum efficitur quis vitae arcu. Aenean sem leo, lacinia eu elementum nec, posuere et ligula. Nunc vehicula magna ante. Morbi vitae nulla euismod, vehicula ante bibendum, fermentum nisi. Fusce tincidunt eleifend dolor sed condimentum. Suspendisse mattis ex quis orci commodo, et molestie risus vestibulum. Pellentesque a efficitur enim, vel finibus urna. Maecenas imperdiet neque in ornare tristique. Sed scelerisque hendrerit tempor.
Duis sit amet lorem dapibus, bibendum quam accumsan, varius metus. Integer venenatis velit id ullamcorper convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc sed elementum ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis faucibus velit lobortis hendrerit convallis. Morbi dignissim risus a sapien posuere, a dictum dolor convallis. Ut porta purus quis congue imperdiet. Proin sit amet semper ante.

Simple effect for simple tabs, with not much content. If the content is a bit complex (some grids or other), you might change the display:inherit!important; by display:grid!important; to make it work properly.

.oxy-tabs-contents { position:relative }
.oxy-tabs-contents-content-hidden { 
	display:inherit!important;
	position:absolute;
	opacity:0;
	transition:0.5s ease opacity;
	pointer-events: none;
	cursor: default;
}
closealign-justifychevron-downcaret-up