This site is running Voxel Theme Version: 1.5.5.1 | Elementor Plugin Version: 3.28.4

Join the Voxel Guide Community!

Get Involved

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

Description/Instructions

This JS Code Snippet let you use links to open tabs or accordion.

Instructions

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);
});

  • JS
Copy Code

Let's Chat About this Snippet

Chat Toggle
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Ask me anything about Voxel!
Send
Powered by AI24