{tabs}
Panels behind a row of tabs, switched by radio buttons and CSS - no JavaScript.
Syntax
{tabs} {tab 'label'} ... {/tab} {tab 'label'} ... {/tab} {/tabs}
{tabs active='label'} ... {/tabs}Options
-
active - The tab shown first: its number counted from 1, or its label. The first tab when not given.
Description
{tabs} builds a tab set from the {tab} pairs inside it. Every tab is a radio button with a label, and the CSS shows the panel whose radio is checked - there is no script at all. The browser gives the set what a tab list needs: one stop in the tab order, the arrow keys moving between the tabs, and a screen reader hearing the label and "checked". Each panel is a region named by its tab. Printed, every panel shows.
The tag runs twice. On its first walk it opens a collection; every {tab} below it renders its content and hands it to that collection instead of printing it. A tab may stand deeper than directly inside - in an {if}, or in a loop that makes a tab per row. On the end walk the set is built from what was handed over.
active= names the tab shown first, by its number from 1 or by its label; without it the first tab is shown. No fragment goes into the address, so two sets on one page keep their own choice and the back button keeps its meaning. The ids are made from the labels, so they are the same on every request.
Under the strict check these are errors: a {tabs} that never closes, text between the tabs (it would never show - put it inside a tab), a set without any tab, and an active= that names no tab. The colours are the custom properties --pad-tabs-accent, -text, -muted and -line on .pad-tabs.
Examples
Three tabs
A tab set with the second tab shown first, named by its label.
{tabs active='Specifications'}
{tab 'Overview'}
<p>A 1.7 litre kettle in brushed steel that boils a full jug in under four minutes.</p>
{/tab}
{tab 'Specifications'}
<table>
<tr><th>Capacity</th><td>1.7 litres</td></tr>
<tr><th>Power</th><td>2200 W</td></tr>
</table>
{/tab}
{tab 'Reviews'}
<p>Quiet, fast, and the light is a nice touch.</p>
{/tab}
{/tabs}A 1.7 litre kettle in brushed steel that boils a full jug in under four minutes.
| Capacity | 1.7 litres |
|---|---|
| Power | 2200 W |
Quiet, fast, and the light is a nice touch.
A tab per row
The tabs made in a loop over the data - one per plan.
{tabs}
{plans}
{tab $name}
<p><strong>{$price}</strong> a month - {$about}</p>
{/tab}
{/plans}
{/tabs}<?php
$plans = [
[ 'name' => 'Starter', 'price' => '€ 9', 'about' => 'for one person and a side project' ],
[ 'name' => 'Team', 'price' => '€ 29', 'about' => 'for a team that ships every week' ],
[ 'name' => 'Studio', 'price' => '€ 79', 'about' => 'for an agency with many clients' ] ];
?>€ 9 a month - for one person and a side project
€ 29 a month - for a team that ships every week
€ 79 a month - for an agency with many clients
See also
- {tab} One item of a tabs, accordion or carousel: its label and its content, handed to that owner.
- {accordion} Items that open and close on a click, each a details element - no JavaScript.
- {carousel} Slides in a row that scrolls and snaps sideways, with arrow links and dots - no JavaScript needed.
- {modal} A dialog over the page with the button that opens it - works with and without JavaScript.