Tab hover changes Paragraph using JavaScript for Elementor

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>
				
			

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest tutorials

Freelancer Mojibur
freelancer mojibur

Start a Project!

Interested in working together? Send a quick message or schedule a meeting. Ask questions, discuss details, and decide if we are a good fit.

Website Project Inquiry

This form helps me get a general idea. We’ll schedule a meeting soon to discuss everything in more detail!

Freelancer Mojibur

Contact person

For quick communication email at: freelancermojibur@gmail.com