# Tabs Future Plans

## Roadmap 

| Feature                   | Now                                                          | Planned                                            | Considering                                                             |
| ------------------------- | ------------------------------------------------------------ | -------------------------------------------------- | ----------------------------------------------------------------------- |
| Orientation               | Vertical or horizontal, defined by your Webflow tabs element |                                                    |                                                                         |
| Animations for open/close |                                                              |                                                    | Considering some means to support WF Interactions, or else GSAP themes. |
| Dynamic initialization    |                                                              | Select on # or query param, and scroll-to          |                                                                         |
| Modes                     |                                                              | Tab change on hover                                | *Tabcordion*                                                            |
| Keyboard                  |                                                              | Possible keyword support, review a11y requirements |                                                                         |

{% hint style="success" %}
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. 
{% endhint %}

## JavaScript API

### Methods 

| Feature                     | Now                                                 | Planned | Considering |
| --------------------------- | --------------------------------------------------- | ------- | ----------- |
| Programmatic Navigation     | Navigate to tab number, first, last, next, and prev |         |             |
| Add / remove / reorder tabs |                                                     |         | Considering |

### Events

| Feature              | Now                      | Planned                                                                             | Considering |
| -------------------- | ------------------------ | ----------------------------------------------------------------------------------- | ----------- |
| Tab changed event    | Occurs on any tab change | Will reconsider how this should work in multi-item mode                             |             |
| Tab can change event |                          | Can open, can close, etc.  Give dev the ability to reject an open or close request. |             |

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; 

{% hint style="danger" %}
These are under consideration for implementation, and not yet implemented. 
{% endhint %}

## Events <a href="#getting-started-nocode" id="getting-started-nocode"></a>

### 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.&#x20;

However it requires;

* Completely overriding the default webflow\.js event handler
* Replacement of that default handler with an SA5 variant&#x20;
* An event origination flag, i.e. user-initiated v. code-initiated&#x20;

## Change on Hover <a href="#getting-started-nocode" id="getting-started-nocode"></a>

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

## Select on Query or #&#x20;

* `#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&#x20;
* Scroll-to option
* URL change option as tab changes
* In-page link from `#hash` links or NS `#ns.ksdfj`&#x20;

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

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-elements/tabs/tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.