Details
CSS and HTML
The listing at the bottom is produced by standard HTML and minimal CSS:
* { box-sizing: border-box; margin: 0; }
section { margin-left: 1em; }
...
<section><h2>Vacation Suggestions</h2>
<div id="demo">
<section><h3>Winter</h3>
<p>
December through February.
</p>
<div id="winter">
<section><h4>Québec</h4>
<p>
Winter Carnaval.
</p>
...
Usage
The five
attributes, one for each folder, are the only things added to the original HTML to make this work.
id=
This is the expected structure within the
container:
id=
<folder id="hit-me">
<page>
<label>
... content ...
...
<page>
<label>
... content ...
</folder>
-
The tags of course are not actually
<folder>etc., but can be any suitable container, such as<header>,<section>, or<ul>and<li>. -
Each immediate child of an
container defines a page, with its first child providing the tab label.id= -
The
content
can be any HTML, possibly including other tabbed folders. -
An additional
<div id="tab_id">element will be inserted before the given container, where_id
is the same as the original id. Be aware that this additional element could affect existing styling in the rest of the document.
Script
Pressing the button executes this script:
<head>
<script async="async" src="https://rbutterworth.nfshost.com/.JS/RB.tabs.js"></script>
<script> "use strict"
window.addEventListener("load", function() {
RB.tab([
["demo", "#CFD", "#FF4", "Seasonal Vacation Suggestions. Click a tab to open it."],
["winter"],
["spring"],
["summer"],
["autumn"]
])
})</script>
</head>
Vacation Suggestions
Winter
December through February.
Québec
Carnaval de Québec offers over two weeks in late January and early February celebrating winter outdoors.
New Orleans
Mardi Gras celebrates the last day before the Catholic Lent begins, with costumes, parades, music, and parties.
Jamaica
Hot! Hot! Hot!
Cold: enjoy it or go somewhere warm.
Spring
March through May.
Elmira
Elmira Maple Syrup Festival celebrates Mennonite food and especially pancakes and maple syrup in early April.
Florida
Celebrate Spring Break with millions of students in Daytona Beach.
Grand Canyon
Beat the rush and visit the Grand Canyon in spring.
Cool and wet: eat and stay warm, or get away.
Summer
June through August.
Orillia
Fern Resort provides activities for the whole family.
Niagara Falls
Niagara Falls has sights, entertainment, and is close to theatres, wine country, and border shopping.
Iceland
Iceland has volcanoes, hot springs, glaciers, and 24-hours of sunlight.
Hot: stay cool.
Autumn
September through November.
Algoma
See the fall colours from the Agawa Canyon Tour Train.
Mexico
Enjoy the festivities of the Day of the Dead.
Italy
Roam Rome.
Cool: enjoy nature, or visit another country.
URL Parameters
URLs can have three parameters:
- tabulate={yes|no}
- tab_id=[id]
- tab_tab=[label]
The example above could be loaded with ?tabulate=yes&tab_id=summer&tab_tab=iceland to start with the Summer→Iceland tab open.