Let’s say you add the Elementor Tab widget to your page and add a few tabs (Tab 1, Tab 2, Tab 3, etc.). Wouldn’t it be cool to link to one of those tabs directly and show its content? Well, here’s an easy way to do that.
- Edit the Elementor Tab widget.
- Expand the ‘tab you want to link to.
- CSS ID > Enter a unique ID (e.g., tab2) (Note: The ID you enter must be unique across your ENTIRE website.
- Add Elementor’s HTML widget to this same page and place it right under the top-most heading of your page. (Note: Technically, you can add this widget anywhere on the page, but it can impact the spacing on your page if placed in certain areas.).
- Place the contents of the code snippet below into the HTML widget and save changes.
<script>
window.addEventListener('load', () => {
setTimeout(function () {
let scrollOffset = 100; /* scroll offset from the top of title */
const tabsAccordionToggleTitles = document.querySelectorAll('.e-n-accordion-item-title, .e-n-tab-title, .elementor-tab-title');
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 = 400;
}
setTimeout(function () {
jQuery('html, body').animate({
scrollTop: jQuery(scrollTarget).offset().top - scrollOffset,
}, 'slow');
}, 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);
});
};
}, 300);
});
</script>
Anchor Offset
If you need to adjust the top or bottom spacing of your content linked to as part of this code snippet, you can adjust Line 5. The higher the value, the more you push the content down the page.