Tabs

Tabbed content panels with optional synchronized selection

Tabs

Tabs organize content into switchable panels. Selection persists via localStorage and syncs across the page.

Basic Usage

This is the preview content. It shows the rendered output.

<div class="container">
  <h1>Hello World</h1>
</div>
HTML

Additional notes and explanation go here.

Syntax:

:::tabs
== First Tab
Content for the first tab.

== Second Tab
Content for the second tab.
:::
Markdown

With Rich Content

steps

  1. Clone the repository

    git clone https://github.com/user/repo.git
    Bash

  2. Install dependencies

    composer install
    Bash

  3. Start the server

    php -S localhost:8000 -t public
    Bash
server:
  host: localhost
  port: 8080
  debug: true
YAML
  • PHP 8.2+
  • Composer
  • SQLite
  • GD library

Synchronized Tabs

Tab selections are saved to localStorage. If a reader picks a tab labeled "Python" in one tab group, all tab groups on the page with a "Python" tab will switch automatically.

Best Practices

  • Use clear, concise tab labels
  • Keep tabs to 2--5 panels per group
  • Use tabs for parallel content (same topic, different views)
  • Don't nest tabs inside tabs