Tabs

Use tab blocks to create switchable sections of content, for example, instructions for different platforms or languages, user roles or scenarios.

To add a block of tabs, use the <tabs> elements with <tab> sub-elements.

        <tabs>
            <tab id="windows-install" title="Windows">
                How to install on Windows.
            </tab>
            <tab id="macos-install" title="macOS">
                How to install on macOS.
            </tab>
            <tab id="linux-install" title="Linux">
                How to install on Linux.
            </tab>
        </tabs>
    

How to install on Windows.

How to install on macOS.

How to install on Linux.

If you have several tab blocks for the same switchable items, you can synchronize them so that when the reader switches in one block, the same tab will open in all other blocks on the page. To do this, define the group attribute for <tabs> and the group-key attribute for <tab>.

        <tabs group="os">
            <tab id="windows-install" title="Windows" group-key="windows">
                How to install on Windows.
            </tab>
            <tab id="macos-install" title="macOS" group-key="macos">
                How to install on macOS.
            </tab>
            <tab id="linux-install" title="Linux" group-key="linux">
                How to install on Linux.
            </tab>
        </tabs>
    

Notice how the same tab opens when you select it in all tab groups on this page:

How to uninstall on Windows.

How to uninstall on macOS.

How to uninstall on Linux.

Topic-level switcher

Instead of separate tab blocks, you can add one switcher for the whole topic and mark pieces of content that apply to a specific platform or user role.

You can mark any element using the switcher-key attribute. Writerside will add all unique switcher keys that appear in this topic.

                <topic title="Topic title" switcher-label="Language">
                    ...
                    <chapter title="Examples" switcher-key="Java">
                        <p>Some Java examples.</p>
                    </chapter>

                    <chapter title="Examples" switcher-key="Kotlin">
                        <p>Some Kotlin examples.</p>
                    </chapter>
                    ...
                

                    ---
                    switcher-label: Language
                    ---
                    # Topic title

                    ...

                    ## Section One {switcher-key="Java"}

                    Some Java examples.

                    ## Section Two {switcher-key="Kotlin"}

                    Some Kotlin examples.
                    ...
                

At the top of this page, use the Language switcher to change between Java and Kotlin, and see how Writerside shows only one or the other chapter:

Examples

Some Java examples.

Examples

Some Kotlin examples.

Last modified: 21 June 2024