Using CSS to produce a tabbed folder.

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 id= attributes, one for each folder, are the only things added to the original HTML to make this work.

This is the expected structure within the id= container:

    <folder id="hit-me">
        <page>
            <label>
            ... content ...
        ...
        <page>
            <label>
            ... content ...
    </folder>
			

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:

The example above could be loaded with ?tabulate=yes&tab_id=summer&tab_tab=iceland to start with the Summer→Iceland tab open.

Source Code