Pure CSS Vertical Tabs

Share & showcase
,
3

I made a pseudo-plugin that toggles your snippet.
Code:

import { Plugin, App, Notice } from "obsidian";

async function toggleVerticalTabs(app: App): Promise<void> {
    try {
        const snippetName = "vertical-tabs-by-Moy";
        const customCss = app.customCss;

        if (!customCss) {
            throw new Error("Custom CSS API not available");
        }

        // Check if snippet exists
        const snippetExists = await app.vault.adapter.exists(
            `${app.vault.configDir}/snippets/${snippetName}.css`
        );

        if (!snippetExists) {
            throw new Error(`Snippet '${snippetName}.css' not found`);
        }

        // Get current state and toggle it
        const isEnabled = customCss.enabledSnippets.has(snippetName);
        customCss.setCssEnabledStatus(snippetName, !isEnabled);

        // Show notification
        new Notice(
            `Vertical tabs ${!isEnabled ? "enabled" : "disabled"}`
        );

        console.log("Vertical tabs toggled:", {
            wasEnabled: isEnabled,
            nowEnabled: !isEnabled
        });

    } catch (error) {
        console.error("Error toggling vertical tabs:", error);
        new Notice(`Failed to toggle vertical tabs: ${error.message}`, 5000);
    }
}

export class SwitchVerticalTabsPlugin extends Plugin {
    async onload() {
        this.addCommand({
            id: "switch-vertical-tabs",
            name: "Toggle Vertical Tabs",
            callback: () => toggleVerticalTabs(this.app),
        });
    }
}

export async function invoke(app: App): Promise<void> {
    return toggleVerticalTabs(app);
}

Save code as Toggle-Vertical-Tabs.ts or something (doesn’t matter actually but you’ll need to find the script by the name you set when assigning hotkeys) and in the const snippetName = "vertical-tabs-by-Moy"; line add the name of the snippet you saved it with (this part is more important).

You’ll need the CodeScript Toolkit plugin that will automatically load the .ts file, you just need to add in the settings, which folder it will look for, as I showed in this post with screenshots.

So now I have a key combo bound to the script and it toggles the snippet ON and OFF.
Pretty cool.

1 Like