Buy Us a Beer! Community Forum Micro-Consulting

Tabs Future Plans

SA5 Tabs Future Plans

Roadmap

The Tabcordion mode mentioned above is a conceptual hybridization of a tab element and an accordion. It's intended to solve the issues surrounding tab elements on mobile devices. How the implementation might best work is not yet determined.

JavaScript API

Methods

Events

Additional thoughts;

  • Detection of common hidden state scenarios, and numbering, selection etc. based on the visible indices only.

    • Conditional visibility

  • Auto-select N ( e.g. if first is conditionally hidden, we get tab 2 )

  • Addition of informational attributes on the tabs outer element

    • no tabs state, tab count

  • Console log error if more than one tab element is accidentally assigned the same unique name.

Some things we're considering;

These are under consideration for implementation, and not yet implemented.

Events

Pre-change event

Fire an event before a tab change happens, and allow the responding code to approve/deny the change. This is very interesting, for special flows such as multi-step forms.

However it requires;

  • Completely overriding the default webflow.js event handler

  • Replacement of that default handler with an SA5 variant

  • An event origination flag, i.e. user-initiated v. code-initiated

Change on Hover

https://discourse.webflow.com/t/open-tab-pane-on-hover-instead-of-click/218539/3

Select on Query or #

  • #hash on query

    • Use tab name as default

    • Or explicit name ( e.g. CMS-based ) wfu-tab

      • Auto-gen these on CMS layout to tabs

        • Will need an wfu-tab-ns also

  • Scroll-to option

  • URL change option as tab changes

  • In-page link from #hash links or NS #ns.ksdfj

https://webflow.com/made-in-webflow/website/simple-tab-link

Approaches-

Event listener on links

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (event) {
        event.preventDefault();
        const targetId = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);

        if (targetElement) {
            window.scrollTo({
                top: targetElement.offsetTop,
                behavior: 'smooth'
            });
            
            // Custom script when a hashtag link is clicked
            customFunction();
        }

        // Update the URL hash without causing a page jump
        history.pushState(null, null, `#${targetId}`);
    });
});

function customFunction() {
    console.log('Hashtag link clicked!');
}

Hashchange event;

window.addEventListener('hashchange', function() {
    console.log('Hash changed:', location.hash);

    // Custom script when the hash changes
    customFunction();
});

function customFunction() {
    console.log('Hashtag link clicked!');
}

Intercept Link Clicks with event delegation

document.addEventListener('click', function(event) {
    const target = event.target;

    if (target.tagName === 'A' && target.getAttribute('href').startsWith('#')) {
        event.preventDefault();
        const targetId = target.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);

        if (targetElement) {
            window.scrollTo({
                top: targetElement.offsetTop,
                behavior: 'smooth'
            });

            // Custom script when a hashtag link is clicked
            customFunction();
        }

        // Update the URL hash without causing a page jump
        history.pushState(null, null, `#${targetId}`);
    }
});

function customFunction() {
    console.log('Hashtag link clicked!');
}

Last updated