Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1371251

    I have several installations with your theme Enfold.
    The feature https://kriesi.at/documentation/enfold/button/#toggle-id-7 doesn´t work.
    We have one page already online – it worked, but then just didn´t work anymore.
    Actually a new customer would like to use this feature the same way. I tried to add it in my homepage
    and it doesn´t work, too.
    Just nothing happens.

    Could you pls help?
    Anymore informations needed?

    #1371363

    Do you load jQuery in footer? if you do – then it might be good to set on

    add_action('wp_footer', 'toggle_on_click', 999);
    

    a priority to be sure that your script loads after jQuery.

    next ( please change that on documentation page too ) : on newer jQuery Versions the :

    jQuery(window).load(function(){	
    

    is deprecated – you had to use now:

    $(window).on('load', function(){
    
    #1371499

    Hi,
    When I check your page /test/ I see a button Klick mich, when I click it a contact form is shown, and another click hides the form.
    So this is working for me on Windows in Chrome, Firefox, & Edge, perhaps you have already sorted this out?

    Best regards,
    Mike

    #1371613

    By the way: the display : none is a toggle between two states – so it is not animatable.
    The toggle function in jQuery gives – and maybe even better slideToggle – also results in a display: none at the end, but before that a timing function of height which goes to zero.

    if you like to have it more smooth:
    ( class to section that will be toggled: hidden-section ; button-class: toggle-button )

    function toggle_on_click(){
    ?>
    <script>
    (function($){
    	$(window).on('load', function(){
    		$(".toggle-button a").each(function() {
    			$(this).addClass('no-scroll');
    			var target = $(this).attr('href');
    			$(this).on("click", function(e) {
    				$(target).slideToggle( 1000 );
    				$(this).text(function(i, v){
    					return v === 'Show' ? 'Hide' : 'Show'
    				});
    			});
    		});
    	});
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'toggle_on_click');
    #top .hidden-section {
       display: none;
       min-height: unset;
    }

    You now can use the code above to open more than one section on that page! only the buttons target anchor must be correlated to the ID of the section.

    see: https://webers-testseite.de/toggle-section/#toggle-section

    btw: this slideToggle can have option ( f.e. instead of slow ( 400ms) you can insert 2000 for ms timing) : https://www.tutorialkart.com/jquery/?tutorial=jquery-slide-toggle

    PS: the no-scroll class prevents the scrolling to that ID – if you like to have that maybe add a class to those buttons where the scrolling is not wanted – and then you only add that class to those buttons.


    PPS:
    with or without that scrolling – there will be a “jump” in height ( same as on display: none) – you can not totally avoid that

    #1371647

    Hi,
    Thanks for sharing Guenni007, very good example.

    Best regards,
    Mike

    #1371681

    Hi, thanks for your answers… mails landes in spam :( …

    We changed the function from .load to .ready:
    //jQuery(window).load(function(){
    jQuery(document).ready(function ($) {

    then it worked. It doesn´t work with .load – in any of the installations.
    Documentation is not good in this case, unfortunately.

    #1371688

    Hi,
    Glad to hear that you have this sorted out, we will update the documentation. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘toggle a color section when a button is clicked doesn´t work’ is closed to new replies.