Accordion: Click Photo – Scroll and open specific Accordion Item

Description

• Click Photo (Image Block, List Image,…) > Scroll and open specific Accordion Item
• View Demo – Password: abc

#1. First, add link to Photo, we can use format like this

#team-olga

#team-renna

#team-robert

#2. Next, add syntax like this into Accordion Title

<div id="team-olga"></div>

<div id="team-renna"></div>

<div id="team-robert"></div>

#3. Hover on page where you use Photos/Accordion > Click Gear icon

Click Advanced > Paste this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('a[href^="#team-"]').on('click', function(e) {
        e.preventDefault();
        
        const targetId = $(this).attr('href').substring(1);
        const $targetElement = $('#' + targetId);
        
        if ($targetElement.length) {
            const $accordionItem = $targetElement.closest('.accordion-item');
            const $accordionTitle = $accordionItem.find('.accordion-item__title-wrapper');
            
            $('.accordion-item--open').each(function() {
                $(this).find('.accordion-item__click-target').trigger('click');
            });
            
            setTimeout(function() {
                $accordionTitle[0].scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'start' 
                });
                
                setTimeout(function() {
                    if (!$accordionItem.hasClass('accordion-item--open')) {
                        $accordionItem.find('.accordion-item__click-target').trigger('click');
                        
                        setTimeout(function() {
                            $accordionTitle[0].scrollIntoView({ 
                                behavior: 'auto', 
                                block: 'start' 
                            });
                        }, 500);
                    }
                }, 1000);
            }, 1000);
        }
    });
    
    $("span.accordion-item__title").each(function() {
        $(this).html($(this).text());
    });
});
</script>