Tabs

Description

Creates a tabbed interface where content is organized into clickable tabs. Each tab contains related content that can be accessed by clicking the tab headers.

Usage

Wrap content in a container with class .tabs. Use headings (h2, h3) as tab titles. Content following each heading becomes tab content.

Available Options

CSS Classes:
- .tabs - Main container for tabbed interface
- .nav-left - Places navigation on the left side (default)
- .nav-top - Places navigation at the top
- .nav-bottom - Places navigation at the bottom
- .mono-color - Uses single color scheme instead of pastel colors
- .no-title - Hides the heading text in tab content (heading still used for tab button)
Data Attributes:
- data-color="color" - Custom background color for individual tabs
- data-font-color="color" - Custom text color for individual tabs

Examples

Basic Tabs

Tab 1

This is the content for the first tab.

You can include multiple paragraphs and other elements.

Tab 2

This is the content for the second tab.

Lists work fine in tabs
As do other HTML elements

Tab 3

This is the content for the third tab.

Example Box

Even containers work within tabs.

Tabs with Custom Colors

Red Tab

This tab has a custom red background color.

Teal Tab

This tab has a custom teal background color.

Blue Tab

This tab has a custom blue background color.

Tabs with Custom Tab Text

Introduction

Tabs text: Welcome to our course

This uses the text after "Tabs text:" as the tab label instead of the heading text.

Main Content

Tabs text: Core Learning Material

The heading says "Main Content" but the tab shows "Core Learning Material".

Conclusion

Tabs text: Summary and Next Steps

This allows for shorter tab labels while keeping descriptive headings.

Tabs with Mono Color

Single Color Tab 1

This tab set uses a single color scheme instead of the default pastel colors.

Single Color Tab 2

The mono-color class creates a more uniform appearance.

Single Color Tab 3

All tabs use the same background color with white borders for the selected tab.

Tabs with Hidden Titles

Tab 1

This tab has a hidden title. The heading "Tab 1" won't be visible in the content area, but the tab button will still show "Tab 1".

This is useful when you want clean content without visible headings.

Tab 2

This tab has a visible title. The heading "Tab 2" will be shown in the content area.

Tab 3

Another tab with hidden title. Notice how the content flows without the heading being visible.

Tabs with Mixed Title Visibility

Visible Title

This tab shows the heading "Visible Title" in the content area.

Hidden Title

This tab hides the heading "Hidden Title" but still creates a tab button with that text.

Another Visible Title

This tab shows the heading "Another Visible Title" in the content area.

Notes

Tab navigation is automatically generated from headings
Use "Tabs text: [custom text]" after headings to override tab labels
Tab colors can be customized per tab using data attributes
Tabs work well with other interactive elements
Use .nav-top or .nav-bottom to control tab placement
Add class="no-title" to headings to hide them in content while keeping tab buttons