Get Involved
No items added to cart
No items added to cart
This JS Code Snippet let you use links to open tabs or accordion.
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 < script> before your code and </script> after the code if it isn't already inserted above.
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);
});
Are you sure you want to exit? Your current conversation will be lost.