The “Horizontal Gallery” and “Accordion” combination is malfunctioning.

Hey tchamp77,

Thank you for the inquiry,

This is to be expected, since the default behavior when clicking an inactive Horizontal Gallery item is to navigate or slide it to the center. This behavior overrides the anchoring to the Accordion items. Once the image is centered, the anchor should work without issue.

To override this behavior, you can try this script in the functions.php file:

<?php
add_action( 'wp_footer', 'ava_wp_footer_script_mod', 99 );

function ava_wp_footer_script_mod() {
    ?>
    <script>
    // override default horizontal gallery clicks behavior to open accordion and scroll to title
    (function($) {
        $(document).on('click', '.av-horizontal-gallery-slider a[href^="#toggle-id-"]', function(e) {
            e.preventDefault();
            e.stopImmediatePropagation();

            var targetId = $(this).attr('href').slice(1);

            setTimeout(function() {
                var $title = $('#toggle-toggle-' + targetId);
                var $wrap  = $('#' + targetId);

                if (!$title.length) return;

                if (!$wrap.hasClass('active_tc')) $title.trigger('click');

                setTimeout(function() {
                    $('html, body').animate({ scrollTop: $title.offset().top - 80 }, 500);
                }, 50);
            }, 50);
        });
    })(jQuery);
    </script>
    <?php
}

Best regards,
Ismael

Hi,

Thank you for the update.

We tried accessing the page to check on the script behavior, but we’re currently not able to view the site because the SSL certificate appears to be invalid or expired. We would d need that resolved before we can properly test and debug the issue on our end.

Could you please contact your hosting provider to get the SSL certificate corrected? Once the site is accessible over https, we can take a closer look at what’s happening with the horizontal gallery and the accordion anchor behavior and adjust the script accordingly.

Let us know once the certificate issue has been fixed.

Best regards,
Ismael

Hey!

Thank you for the info.

We tried logging to the site but the previous credentials are invalid.

We adjusted the script a bit so it properly intercepts the click at the .av-horizontal-gallery-wrap level, check if the clicked target is an anchor pointing to a toggle or accordion item and override the default gallery behavior.

Please replace the existing script in functions.php with this updated version:

add_action( 'wp_footer', 'ava_wp_footer_script_mod', 99 );

function ava_wp_footer_script_mod() {
    ?>
    <script>
    (function($) {
        $(document).on('click', '.av-horizontal-gallery-wrap', function(e) {
            var $anchor = $(e.target).closest('a[href^="#toggle-id-"]');

            if (!$anchor.length) return;

            e.preventDefault();
            e.stopImmediatePropagation();

            var href = $anchor.attr('href');
            var targetId = href.slice(1);
            var $title = $('#toggle-toggle-' + targetId);
            var $wrap = $('#' + targetId);

            if (!$title.length) return;

            if (!$wrap.hasClass('active_tc')) {
                $title.trigger('click');
            }

            setTimeout(function() {
                $('html, body').animate({ scrollTop: $title.offset().top - 80 }, 500);
            }, 300);
        });
    })(jQuery);
    </script>
    <?php
}

Please make sure to purge the cache before testing. Let us know the result.

Best regards,
Ismael

Hi,
I changed the script to this:

function disable_horizontal_gallery_image_nav() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.av-horizontal-gallery-wrap').forEach(function(wrap) {
    const link = wrap.querySelector('a[href^="#toggle-id-"]');
    if (!link) return;

    const href = link.getAttribute('href');

    wrap.style.cursor = 'pointer';
    wrap.addEventListener('click', function(e) {
      e.stopPropagation();

      const toggleId = href.replace('#', '');
      const toggleTrigger = document.querySelector('[data-fake-id="' + href + '"], [href="' + href + '"], #' + toggleId + ' .toggler, .toggle-title[href="' + href + '"]');

      if (toggleTrigger) {
        toggleTrigger.click();

        let scrollTimer = null;
        window.addEventListener('scroll', function onScroll() {
          clearTimeout(scrollTimer);
          scrollTimer = setTimeout(function() {
            window.removeEventListener('scroll', onScroll);
            window.scrollBy({ top: -250, behavior: 'smooth' });
          }, 300);
        });

      } else {
        window.location.hash = href;
      }
    });

    link.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
    });
  });
});
  </script>
  <?php
}
add_action( 'wp_footer', 'disable_horizontal_gallery_image_nav', 99 );

Give it a try.

Best regards,
Mike