Accordion: Click Photo – Open specific Accordion item

Description

• Click Photo (Image Block, List Image,…) > 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

<!-- @tuanphan - Click Photo Open Acc item -->
<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');
            
            if ($accordionItem.length) {
                $('.accordion-item--open').not($accordionItem).each(function() {
                    $(this).find('.accordion-item__click-target').trigger('click');
                });
                
                if (!$accordionItem.hasClass('accordion-item--open')) {
                    $accordionItem.find('.accordion-item__click-target').trigger('click');
                }
            }
        }
    });
    $("span.accordion-item__title").each(function() {
        $(this).html($(this).text());
    });
});
</script>