Link to an accordion’s tab scrolls too much down and hides the tab’s title

Hey Marina,
Thanks for your patience and the link to your site, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function anchor_offset_with_slow_scroll() { ?>
  <script>
(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 100 //offsets for fixed header
        }, 1000);
        return false;
      }
    }
  });
}(jQuery));
</script>
  <?php
}
add_action('wp_footer', 'anchor_offset_with_slow_scroll');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
You will need to add a custom class to the links to your accordion toggles or we could have it work only on certain pages.

Best regards,
Mike

Hi,
If you are using the custom class link-to-accordion then this should work:

function anchor_offset_with_slow_scroll() { ?>
  <script>
(function($) {
  $('a.link-to-accordion[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 100 //offsets for fixed header
        }, 1000);
        return false;
      }
    }
  });
}(jQuery));
</script>
  <?php
}
add_action('wp_footer', 'anchor_offset_with_slow_scroll');

If not then please add the class to the test link Comparing WPML

Best regards,
Mike

Hi,
Thanks for the feedback, I checked the button “sitemap example” and while the title in the lightbox showed in my tests, I do see that you are using a script to remove the title on hover, probably for images or another element and it needs to be adjusted to exclude these buttons.
Please include an admin login and explain what titles need to be removed with the script.
Please also explain how to see the null error for the button lightbox, is in a certain browser or clicking back and forth between the buttons?

Best regards,
Mike

Hi,
Thanks for the login, I’m not seeing a link in the button, how is the link to the image added?
The image needs to have a title for it to show in the lightbox, the script adds the title back on click so it will show in the lightbox, but it seems that once in a while the lightbox is faster than the script. I have a hard time reproducing, like you said, we need to try 3 or 4 times, it’s hard to correct an issue that doesn’t occur all of the time.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, I was mistaken about which title was used, unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Unfortunately not in this case because the image title is not used in the button element, only a link to the image.

Best regards,
Mike