Feature request: collapsable tabs (by default)

[wanno-drijfhout]

Hi,

Your tabs plug-in is lovely. I use it a lot to let readers see the appropriate fragments for their language and framework.

As you can see below, I add a small dummy tab in the front ("...") allowing users to make their selection explicitly. The other tabs are actually quite long and can be overwhelming, especially if that information is not relevant for that reader.

<!-- tabs:start -->

### **...**

*Select your language and framework.*

### **Typescript**

![anonymous-call.ts](anonymous-call.ts ':include :type=code')

### **Java**

![anonymous-call.java](anonymous-call.java ':include :type=code')

### **Ruby**

![anonymous-call.rb](anonymous-call.rb ':include :type=code')

<!-- tabs:end -->

This dummy-tab pattern occurs quite a lot, but it would be obsolete if all tabs were "inactive" by default. It would be beautiful if clicking an already "active" tab again would make it "inactive" again as well. It would also be useful if the default state for tabs ("collapsed" or "expanded") would be configurable via the plugin config.

Is this feature easy to add? Or would you be open to a Pull Request? What would be the best way to annotate which tab (if any) should be active by default, in a certain tab block?

[jhildenbiddle]

Hi @wanno-drijfhout.

Thank you for the kind words. Happy to hear your enjoying the plugin! 😄

As much as I appreciate the goal, I'm not a big fan of adding complexity and unfamiliar behavior to common UI elements like tab sets. That's not meant as a hard "no" to enhancements, but I think there are other options worth exploring before adding new features to docsify-tabs.

Option 1: Continue using the "Select..." tab pattern

I think the solution you've come up with is great! It's simple, accomplishes the goal without introducing new behavior or screen elements, and because the "toggle" is a tab it can leverage the existing persist and sync options.

While this won't change the behavior, you could visually separate the "select" tab using custom CSS:

<!-- tabs:start -->

#### **...**

*Select your language and framework*

#### **Tab A**

...

<!-- tabs:end -->

<style>
    button[data-tab="..."] {
        font-size: 0;
    }

    button[data-tab="..."]:before {
        content: url(https://icongr.am/octicons/info.svg?size=16&color=b3b3b3);
        display: block;
        margin: 0 1rem;
    }

    button.docsify-tabs__tab--active[data-tab="..."]:before {
        content: url(https://icongr.am/octicons/info.svg?size=16&color=0b87da);
        display: block;
        margin: 0 1rem;
    }
</style>

If your "Select..." message is consistent across tab sets, you can define and render the message via CSS:

<!-- tabs:start -->

#### **...**

#### **Tab A**

...

<!-- tabs:end -->

<style>
    .data-tab-content[data-tab-content="..."]:before {
        content: 'Select your language and framework';
        font-style: italic;
    }
</style>

Or use docsify's embed feature to store the message in a separate file:

<!-- tabs:start -->

#### **...**

[filename](path/to/file.md ':include')

#### **Tab A**

...

<!-- tabs:end -->

Option 2: Scrollable tab content

Setting a max-height and overflow declaration will allow the tab containers to be scrollable.

Here's a simple implementation:

<style>
    .docsify-tabs__content {
        max-height: 60vh;
        overflow: auto;
    }
</style>

The issue I have with the above implementation is that no visual indication will be given that a tab container is scrollable on some operating systems (e.g., macOS and iOS) until a user tries to scroll. Fortunately we can fix this with CSS as well. The other downside is that you will now have scrollable containers (tab content) inside scroll containers (the window) which can sometimes be a headache to navigate (especially on mobile).

<style>
    .docsify-tabs__content {
        max-height: 60vh;
        overflow: auto;
    }

    .docsify-tabs__content::-webkit-scrollbar {
        -webkit-appearance: none;
    }

    .docsify-tabs__content::-webkit-scrollbar:vertical {
        width: 11px;
    }

    .docsify-tabs__content::-webkit-scrollbar:horizontal {
        height: 11px;
    }

    .docsify-tabs__content::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 2px solid white; /* should match background, can't be transparent */
        background-color: rgba(0, 0, 0, .5);
    }
</style>

Option 3: Use a <details> element to expand/collapse tab sets

Instead of active/inactive tab, HTML's native <details> element can be used to toggle the visibility of entire tab sets.

<details>
  <summary>Select your language and framework</summary>

<!-- tabs:start -->

#### **Tab A**

...

#### **Tab B**

...

<!-- tabs:end -->

</details>

Option 4: Create a custom plugin

Docsify's plugin system makes it easy to modify page content--including the tab sets generated by docsify-tabs. This could be a good option for modifying tab behavior without having to navigate the source code for docsfy-tabs. More importantly, it means you'll have the freedom to implement whatever you want however you see fit without being dependent on a PR getting merged. If you come up with something you like, by all means share it and we can discuss further!

Hope this helps. Closing this issue for now but happy to reopen again in the future if needed.

Thanks!