How to Add Tabs to Blogger Posts

Add tabs to Blogger posts to group related content in one place. Simple HTML that works on mobile and in dark mode.

mu abdullah
mu abdullah in
min read
updated on:

    • Tabs let you put several versions of the same content in one place, and readers only see the one they choose. Use them for steps that differ by system, code in several languages, or chapters of a long answer. The theme gives you four styles, keyboard support, links that open a specific tab, and groups that switch together.

    Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.

    How it's built

    Each tab is a <details> tag. The tab title goes in <summary>, and the content goes right after it. Wrap all the tabs in <div class="tabs">.

    <div class="tabs">
  <details>
    <summary>Chapter 1</summary>
    <p>Content of the first tab.</p>
  </details>
  <details>
    <summary>Chapter 2</summary>
    <p>Content of the second tab.</p>
  </details>
</div>

    A tab can hold anything: paragraphs, lists, images, tables, or a code block. If scripts are blocked, the tabs show as simple sections that open and close, so nothing is lost.

    The four styles

    1. Lines

    This is the default. Text titles with a colored line that slides under the active tab.

    Chapter 1

    No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing.

    Chapter 2

    No one shall be subjected to arbitrary interference with their privacy, family, home or correspondence.

    Chapter 3

    Everyone has the right to freedom of movement and residence within the borders of each state.

    <div class="tabs">...</div>

    2. Pill

    Add pill for a rounded bar with a white pill that slides to the active tab.

    Monthly

    $9 per month. Cancel any time.

    Yearly

    $90 per year. Two months free.

    Lifetime

    $199 once. Every future update included.

    <div class="tabs pill">...</div>

    3. Card

    Add card to put the content in a framed box. The active tab joins the box like a folder tab.

    Overview

    A clean, fast Blogger theme with dark mode, instant search and ready-made post components.

    Features
    • Four card grid layouts
    • Instant search
    • Post components
    Requirements

    Any Blogger blog. No plugins or outside hosting needed.

    <div class="tabs card">...</div>

    4. Side

    Add side to list the titles in a column next to the content. On phones the titles move back to a row above it.

    Getting started

    Download the theme, open Theme in Blogger, and choose Edit HTML.

    Install

    Replace all the code with the theme file and click Save.

    Customize

    Open the Theme Designer to change colors, fonts and the corner radius.

    <div class="tabs side">...</div>

    Options

    Choose the first tab

    The first tab opens by default. Add open to another <details> tag to open that one instead.

    <details open>
  <summary>Chapter 2</summary>
  <p>This tab shows first.</p>
</details>

    Link to a tab

    Give a <details> tag an id, then link to it with #. The page opens with that tab selected.

    <details id="windows">...</details>

<a href="#windows">Windows steps</a>

    Tabs that switch together

    Give several groups the same data-sync name. When a reader picks a tab in one group, every group with a tab of the same title switches too. The theme also remembers the choice, so the next post opens on it. Try it here:

    Windows

    Press Ctrl + C to copy.

    macOS

    Press Cmd + C to copy.

    Linux

    Press Ctrl + Shift + C in the terminal.

    Windows

    Press Ctrl + V to paste.

    macOS

    Press Cmd + V to paste.

    Linux

    Press Ctrl + Shift + V in the terminal.

    <div class="tabs" data-sync="os">...</div>
<div class="tabs" data-sync="os">...</div>

    Keyboard

    Readers can press Tab to reach the tabs, the arrow keys to move between them, and Home or End to jump to the first or last tab. Screen readers announce them as real tabs.

    Keep tab titles short. When there are more tabs than fit, the bar scrolls sideways, but readers may miss the tabs that are hidden.

    Quick reference

    You wantWrite
    Lines<div class="tabs">
    Pill<div class="tabs pill">
    Card<div class="tabs card">
    Side<div class="tabs side">
    Open a tab first<details open>
    Link to a tab<details id="name"> + #name
    Groups switch togetherdata-sync="name"