Learn how to change paragraph text when hovering over tabs in Elementor using a simple JavaScript snippet. In this tutorial I’ll show you the markup, the script, and exactly where to place the code so you can create smooth, interactive tab content without extra plugins.
Live example
Bestimmungsrecht ab 18
Konditionssicherung
Steuervorteile
Behalte die Kontrolle über die Finanzen deines Kindes und schütze das Investment, damit das Geld nicht für unüberlegte Ausgaben verwendet wird.
Sichere deinem Investment finanzielle Stabilität, um Risiken durch zukünftige Änderungen wie Steuerreformen zu vermeiden.
Um dein Investment individuell zu gestalten, ist Flexibilität entscheidend. Bei uns kannst du deine Sparrate und Einzahlungen flexibel auf deine Lebenssituation anpassen.
CSS
<!--Container class = tb_wrap-->
<!--Icon box class = tab-->
<!--Text Class= tc -->
.tb{
position: relative;
}
.tb:before {
content: '';
clip-path: ellipse(100% 100%);
border-radius: 100%;
position: absolute;
width: 100%;
height: 100%;
filter: blur(50px);
opacity: .2;
z-index: -10;
background-color: rgb(248 191 60)
}
.tb:hover > .elementor-widget-container,
.tb.active > .elementor-widget-container{
background: #FFF !important;
box-shadow: 0px 4px 20px 0px rgba(248, 191, 60, 0.40);
cursor: pointer;
}
JavaScript
<script>window.addEventListener('DOMContentLoaded', function() {
jQuery(document).ready(function($) {
// Initially hide all .tc items except the first one and set the first .tb as active
$('.tc_wrap .tc').hide().first().show();
$('.tb_wrap .tb').first().addClass('active');
// Hover event for all .tb items
$('.tb_wrap .tb').hover(function() {
// Get the index of the hovered .tb relative to its .tb_wrap container
var index = $(this).index('.tb_wrap .tb');
// Remove the active class from all .tb elements and add it to the hovered one
$('.tb_wrap .tb').removeClass('active');
$(this).addClass('active');
// Show the corresponding .tc based on the index and hide others
$('.tc_wrap .tc').hide().eq(index).show();
});
});
});</script>
