FAQ Accordion keeps randomly jumping on page

Hi,

@Morticka sorry for the late reply, thanks for the video, is that Safari on a mobile device?
So I tested on a Android (Chrome) and couldn’t reproduce, nor with Chrome on Windows 10, I did see a slight movement on Firefox on Windows 10, but when I open the dev tools it stops so I can’t see what is going on.
On Edge, the jumping is more, and on Safari on a Mac it is also more.
The only solution I could think of is to remove the ID for the toggle, which matches the “fake ID” in the address bar. Since you are not linking to it directly it should not be an issue.
So as a test I added this to your functions.php

function custom_script(){
  ?>
  <script>
 jQuery(window).load(function(){
  jQuery('.single_toggle p[data-fake-id="#toggle-id-5"] + .toggle_wrap').removeAttr('id');
  });
  </script>
<?php
}
add_action('wp_footer', 'custom_script');

this removes the ID from the one button “Meer weten?” in the video.
After clearing the browser cache the movement seems to have stopped for this one toggle, please clear your browser cache and check.
If you also find this working then we could apply it to some of your other toggles.

Best regards,
Mike

Hi,
Chrome on iPhone, I see, unfortunately, I don’t have an iPhone to test with, but will the devices I did test with, my thought is that the “toggle_wrap” div has the ID (for example) “#toggle-id-5” which is the same as the ID in the address bar, which in this case should not used as an anchor link to the div when we are opening it or closing it, (the toggle that is).
So you will still see the ID in the address bar, we are not trying to remove it, it’s the “anchor” ID for the “toggle_wrap” that the script removes.
I hope I explained this well. So with this test, the “Meer weten?” toggle stopped moving, while the toggles under “Waar lopen ondernemers zoal tegenaan?” randomly still move some.
So please test this further, and let us know if you want to try this on another toggle.
Please ensure that your iPhone cache is clear when you test.

Best regards,
Mike

Hi,
Glad to hear that it has not been acting up, so far, we will leave this open for further feedback.

Best regards,
Mike

Hi,

@volmering: Would you mind providing a link to the page with the accordion element? We check the toggles and accordion demo on Chrome but we are not able to reproduce the issue.

// https://kriesi.at/themes/enfold/shortcodes/toggles-accordions/#toggle-id-3

Best regards,
Ismael

Hi,

Thank you for the info.

Try to modify the enfold-dev\config-templatebuilder\avia-shortcodes\toggles\toggles.js, look for the scroll_to_viewport functio around line 48.

function scroll_to_viewport()
				{
				    //check if toggle title is in viewport. if not scroll up
				    var el_offset = content.offset().top,
				        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);

				    if(win.scrollTop() > el_offset)
				    {
				        $('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
				    }
				}

Replace it with:

function scroll_to_viewport()
				{
				   return false.
				}

That should disable the scroll whenever the toggle title is not in viewport.

Best regards,
Ismael

Hi,

We are not receiving a lot of reports about this issue, so this just might be unique in your site, how it was setup or because of the combination of elements, plugin or scripts. Please keep the modifications for now.

If you want to move it to the child theme, you can dequeue the original script, copy the script file in your child theme directory and register it back with the new path.

// https://developer.wordpress.org/reference/functions/wp_dequeue_script/
// https://developer.wordpress.org/reference/functions/wp_register_script/

Best regards,
Ismael

Hi,

You may need to do the changes that we suggested above to prevent the accordeon element from scrolling.

// https://kriesi.at/support/topic/faq-accordion-keeps-randomly-jumping-on-page/#post-1302789

If you need more assistance, please feel free to open another thread.

Best regards,
Ismael