Toggle hidden color section

Hey guys,

i love enfold. using it since 2015 and i am still impressed by every new version.

My problem:
i have a button with the class “.trigger1” and a section (that is hidden by default) named “#hide1”.
So whenever i´m hovering an element with that class, the hidden section fades in.
therefore i searched the forums and used this code in my child-theme´s function.php.
it works well on the test server but not on the new server even if the WordPress Versions and the enfold versions are exactly the same.

here it´s working fine: http://www.silkeetex.de

/* hide/show sections */
function add_custom_cs(){
?>
<style>
.trigger1,
.trigger2,
.trigger3,
.trigger4,
.trigger5,
.trigger6,
.trigger7 {
    cursor: pointer; /* Change cursor to hand */
}
</style>
<script>
jQuery(window).load(function(){
    jQuery("#hide1, #hide2, #hide3, #hide4, #hide5, #hide6, #hide7").hide();
    
    jQuery(".trigger1").hover(function() {
        if (jQuery("#hide1").is(":visible")) {
            jQuery("#hide1").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide1").show().addClass("active");
        }
    });
    
    jQuery(".trigger2").hover(function() {
        if (jQuery("#hide2").is(":visible")) {
            jQuery("#hide2").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide2").show().addClass("active");
        }
    });
    
    jQuery(".trigger3").hover(function() {
        if (jQuery("#hide3").is(":visible")) {
            jQuery("#hide3").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide3").show().addClass("active");
        }
    });
    
    jQuery(".trigger4").hover(function() {
        if (jQuery("#hide4").is(":visible")) {
            jQuery("#hide4").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide4").show().addClass("active");
        }
    });
	
	jQuery(".trigger5").hover(function() {
        if (jQuery("#hide5").is(":visible")) {
            jQuery("#hide5").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide5").show().addClass("active");
        }
    });
    
    jQuery(".trigger6").hover(function() {
        if (jQuery("#hide6").is(":visible")) {
            jQuery("#hide6").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide6").show().addClass("active");
        }
    });
    
    jQuery(".trigger7").hover(function() {
        if (jQuery("#hide7").is(":visible")) {
            jQuery("#hide7").hide().removeClass("active");
        } else {
            jQuery(".active").hide().removeClass("active");
            jQuery("#hide7").show().addClass("active");
        }
    });
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_cs');

/* avoid jumping up to header */
function add_custom_href_remove(){
?>
<script>
jQuery(window).load(function(){
jQuery('.trigger1,.trigger2,.trigger3,.trigger4,.trigger5,.trigger6,.trigger7').removeAttr('href');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_href_remove');

Why is that? Can anyone please help?

• This topic was modified 1 year, 4 months ago by webagent007. Reason: typos