Tabbed interface

Features

  • Multiple tabs on the same page.
  • Multiple design options.
  • Choose the default tab (<li class="default">).
  • Choose if the tabs cycle and choose the cycle speed (fast: class="cycle-fast", slow: class="cycle-slow", normal: class="cycle").
  • Injects Pause/Play if cycle is activated. Appropriate French is injected for French pages.
  • Pause/Play alone would have accessibility issues as it not being descriptive enough ("Pause" what?), so the injected code actually says: Pause <span class="wb-invisible">: Stop tab rotation</span> and Play <span class="wb-invisible">: Start tab rotation</span>
  • Force tabs to be the same height, i.e. they will all be the height of the tallest tab. This is useful if there is a cycle effect, so the page doesn't jump as the tab cycles from one panel to the next.

Coding

<div class="wet-boew-tabbedinterface tabs-style-2">
	<ul class="tabs">
		<li><a href="#tabs1_1">Tab 1</a></li>
		<li class="default"><a href="#tabs1_2">Tab 2</a></li>
		<li><a href="#tabs1_3">Tab3</a></li>
	</ul>
	<div class="tabs-panel">
		<div id="tabs1_1">
			...
		</div>
		<div id="tabs1_2">
			...
		</div>
		<div id="tabs1_3">
			...
		</div>
	</div>
</div>

CSS names

This plug-in uses the following CSS names:

  • wet-boew-tabbedinterface
  • tabs
  • tabs-panel
  • tabs-style-1
  • tabs-style-2
  • tabs-style-3
  • tabs-style-4
  • tabs-style-5
  • tabs-style-6
  • tabs-content-pad
  • clear
  • wb-invisible
  • default
  • cycle-fast
  • cycle-slow
  • cycle
  • auto-play
  • auto-height-none
  • animate-fast
  • animate-slow
  • animate
  • slide-horz
  • slide-vert

Basic examples

Default design

Demo includes: Nothing extra

Tab 1

fake link

photoTab 2

Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Tab 2

Contact information
Other examples

Tab 3

fake link

photoTab 1
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

tabs-style-1 design

Demo includes: default tab is the middle tab

Tab 4

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

fake link

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Tab 5

fake link

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Tab 6

fake link

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

tabs-style-2 design

Demo includes: cycle-slow, animate and slide-horz (v3.1)

Tab 7

Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Continue reading: Descriptive link text 1

description 1

Tab 8

Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Continue reading: Descriptive link text 2

description 2

Tab 9

Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Continue reading: Descriptive link text 3

description 3

tabs-style-3 design

Demo includes: cycle-fast and animate-fast

Tab 10

photoTab 11
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

fake link

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Tab 11

fake link

photoTab 12
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

Tab 12

fake link

photoTab 10
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

tabs-style-6 design (v3.1.0)

Demo includes: embedded-grid, animate, cycle and slide-horz.

Tab 24

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tab 25

Nam sagittis, eros bibendum vestibulum ultricies, mi elit luctus lectus, non tincidunt felis lectus ut dolor. Curabitur porttitor felis vel lorem malesuada non tristique enim pellentesque.

Tab 26

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Complex examples

Example 1

When creating parent/child grids, you must use row-start and row-end. There are rare times where this may not be desirable. For example, with drag and drop widgets each grid cell must be the same size so the addition of row-start or row-end on some of them may cause layout problems when the box is moved from one column to another. In such a case, you can use the class embedded-grid. This CSS acts as a container for the tabs and you do not need to put them in a grid cell. It also removes the borders so the full with of the space is available.

National events

Content

Content

Regional events

Content

Content

Content

Content

Local events

Content

Content

Content

Example 2

Some tabs accommodate parent/child grid cells (i.e. you can put a grid cell in another grid cell).

Tab 33

span-2 + span-6

X heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

fake link

photo

Tab 35

span-2

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

span-2

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

span-2

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.

span-2

photoX heading
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.