-
AuthorPosts
-
November 3, 2022 at 4:05 pm #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?November 4, 2022 at 4:52 pm #1371363Do 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(){
November 5, 2022 at 10:18 pm #1371499Hi,
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,
MikeNovember 7, 2022 at 7:55 am #1371613By 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 thatNovember 7, 2022 at 12:59 pm #1371647November 7, 2022 at 6:35 pm #1371681Hi, 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.November 7, 2022 at 7:35 pm #1371688Hi,
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 -
AuthorPosts
- The topic ‘toggle a color section when a button is clicked doesn´t work’ is closed to new replies.