Add this snippet in the page you want to use this functionality, add an HTML widget (FREE) and paste the code in there. Be sure to have before your code and after the code if it isn't already inserted above

changelog

Live Example

[own_shortcode1]

JavaScript

window.addEventListener('load', () => {
setTimeout(function () {




let scrollOffset = 80; /* scroll offset from the top of title */




const tabsAccordionToggleTitles = document.querySelectorAll('.e-n-accordion-item-title, .e-n-tab-title, .elementor-tab-title');




/* Update url when click the tabs itself*/
tabsAccordionToggleTitles.forEach(title => {
  title.addEventListener('click', () => {
    const anchor = title.id || (title.closest('details') && title.closest('details').id);
    if (anchor) {
      history.replaceState(null, null, `#${anchor}`);
    }
  });
});




const clickTitleWithAnchor = (anchor) => {
tabsAccordionToggleTitles.forEach(title => {
if (title.querySelector(`#${anchor}`) != null || title.id === anchor || (title.closest('details') && title.closest('details').id === anchor)) {
if (title.getAttribute('aria-expanded') !== 'true' && !title.classList.contains('elementor-active')) title.click();
let timing = 0;
let scrollTarget = title;
if (getComputedStyle(title.closest('.elementor-element')).getPropertyValue('--n-tabs-direction') == 'row') scrollTarget = title.closest('.elementor-element');
if (title.closest('.e-n-accordion, .elementor-accordion-item, .elementor-toggle-item')) {
timing = 100;
}
setTimeout(function () {
jQuery('html, body').animate({
scrollTop: jQuery(scrollTarget).offset().top - scrollOffset,
}, 'fast');
    // Add this line to update the URL without reloading
    history.replaceState(null, null, `#${anchor}`);
}, timing);
}
});
};




document.addEventListener('click', (event) => {
if (event.target.closest('a') && event.target.closest('a').href.includes('#')) {
const anchor = extractAnchor(event.target.closest('a').href);
if (anchor && isAnchorInTitles(anchor, tabsAccordionToggleTitles)) {
event.preventDefault();
clickTitleWithAnchor(anchor);
}
}
});




const currentAnchor = extractAnchor(window.location.href);
if (currentAnchor) {
clickTitleWithAnchor(currentAnchor);
}




function extractAnchor(url) {
const match = url.match(/#([^?]+)/);
return match ? match[1] : null;
};




function isAnchorInTitles(anchor, titles) {
return Array.from(titles).some(title => {
return title.querySelector(`#${anchor}`) !== null || title.id === anchor || (title.closest('details') && title.closest('details').id === anchor);
});
};




}, 100);
});

Open Specific elementor tabs or accordions with a click of a link or a button

The Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

There are no results matching your search

AI Assistant