Feature request: collapsable tabs (by default) about docsify-tabs HOT 1 CLOSED

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!

from docsify-tabs.