Sometimes you need to group elements either for visual structure or as a functional requirement so that you can manipulate the group. For those situations we’ve created several containers to get you started.

Panels

1.0.0

Primary panel

Containers with headers and optional footers for grouping elements and text.

<div class="panel">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

LESS

The main mixin is called: _panels(WBC)

Faint panel

Places less emphasis on the panel.

<div class="panel panel-faint">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-faint

LESS

The main mixin is called: _panels(WBC)

Responsive panel

Applies additional padding for larger break points.

Demo
<div class="panel panel-responsive">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-responsive

LESS

The main mixin is called: _panels(WBC)

Panel with table

Add table element to panels. Good for highlighting important tables.
The table in this example is not included and will have to be added to the blend separately.

The table in this example is not included and will have to be added to the blend separately.

<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>

	<div class="table-responsive">
		<table class="table table-striped">
			<tbody>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

LESS

The main mixin is called: _panels(WBC)
2.0.0

Primary panel

Containers with headers and optional footers for grouping elements and text.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

LESS

The main mixin is called: _panels(WBC)

Faint panel

Places less emphasis on the panel.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-faint">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-faint

LESS

The main mixin is called: _panels(WBC)

Responsive panel

Applies additional padding for larger break points.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-responsive">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-responsive

LESS

The main mixin is called: _panels(WBC)

Panel with table

Add table element to panels. Good for highlighting important tables.
The table in this example is not included and will have to be added to the blend separately.

The table in this example is not included and will have to be added to the blend separately.

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>

	<div class="table-responsive">
		<table class="table table-striped">
			<tbody>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

LESS

The main mixin is called: _panels(WBC)
2.0.1

Primary panel

Containers with headers and optional footers for grouping elements and text.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

LESS

The main mixin is called: _panels(WBC)

Faint panel

Places less emphasis on the panel.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-faint">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-faint

LESS

The main mixin is called: _panels(WBC)

Responsive panel

Applies additional padding for larger break points.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-responsive">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-responsive

LESS

The main mixin is called: _panels(WBC)

Panel with table

Add table element to panels. Good for highlighting important tables.
The table in this example is not included and will have to be added to the blend separately.

The table in this example is not included and will have to be added to the blend separately.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>

	<div class="table-responsive">
		<table class="table table-striped">
			<tbody>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

LESS

The main mixin is called: _panels(WBC)
2.0.2

Panel

Containers with headers and optional footers for grouping elements and text.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Changed panel footer background colour from @color-Background to @color-Light (#310)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

LESS

The main mixin is called: _panels(WBC)

Faint panel

Places less emphasis on the panel.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Changed panel footer background colour from @color-Background to @color-Light (#310)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-faint">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-faint

LESS

The main mixin is called: _panels(WBC)

Responsive panel

Applies additional padding for larger break points.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Changed panel footer background colour from @color-Background to @color-Light (#310)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-responsive">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>
	<div class="panel-body">
		YOUR TEXT
	</div>
	<div class="panel-footer">YOUR FOOTER</div>
</div>

CSS

Modifier class:
  • panel-responsive

LESS

The main mixin is called: _panels(WBC)

Panel with table

Add table element to panels. Good for highlighting important tables.
The table in this example is not included and will have to be added to the blend separately.

The table in this example is not included and will have to be added to the blend separately.

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Changed panel footer background colour from @color-Background to @color-Light (#310)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.0

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)
<div class="panel panel-default">
	<div class="panel-heading">
		<span class="panel-title">YOUR TITLE</span>
	</div>

	<div class="table-responsive">
		<table class="table table-striped">
			<tbody>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
				<tr>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
					<td>YOUR CELL</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

LESS

The main mixin is called: _panels(WBC)

Tabcordions

1.0.0

Collapsible elements

Collapse and expand content elements.

<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex11-tab2">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex11-tab3">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex11-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex22-tab2">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex22-tab3">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex22-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex33-tab2">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex33-tab3">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex33-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab is-active">
			<a class="js-collapsible" href="#ex5-tab1">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex44-tab2">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex44-tab3">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex44-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header is-active">
		<a href="#ex55-tab1" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex55-tab2" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex55-tab3" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header is-active">
		<a href="#ex66-tab1" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex66-tab2" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex66-tab3" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex77-tab2">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex77-tab3">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header is-active">
		<a href="#ex77-tab1" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex77-tab2" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex77-tab3" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex88-tab2">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab">
			<a class="js-collapsible" href="#ex88-tab3">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header is-active">
		<a href="#ex88-tab1" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex88-tab2" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header">
		<a href="#ex4-tab3" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4-tab3" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init();
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true
1.0.1

Collapsible elements

Collapse and expand content elements.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3101">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex11-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3101">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex22-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3101">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex33-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3101">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex44-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3101">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2101">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3101">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1101" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3101" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3101" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true
2.0.0

Collapsible elements

Collapse and expand content elements.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3200">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex11-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3200">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex22-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3200">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex33-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3200">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex44-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3200">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2200">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3200">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1200" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3200" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3200" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true
2.0.1

Collapsible elements

Collapse and expand content elements.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3201">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex11-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3201">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex22-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3201">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex33-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3201">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex44-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3201">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2201">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3201">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1201" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3201" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3201" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true
3.0.0

Collapsible elements

Collapse and expand content elements.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3300">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex11-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3300">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex22-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3300">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex33-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3300">YOUR TAB</a>
		</li>
	</ul>

	<div id="ex44-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3300">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2300">YOUR TAB</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3300">YOUR TAB</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1300" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3300" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3300" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Tabcordions and scrolling

The accordion scrolls the current active tab into view to make sure users don’t get lost when a large amount of content is moved in and out of view. By default it will scroll the page to the top of the viewport which is great for most websites. However sometimes a website has a fixed element like a header bar on the top that may obstruct the view. Other times the scroll can confuse more than it helps. The tabcordion allows you to adjust this behaviour. The data-tabcordion-scroll on the outer most wrapping HTML tag overwrites the default behaviour to your use case. Use data-tabcordion-scroll="100" to offset the scroll by 100px or data-tabcordion-scroll="none" to disable the scroll all together.

<div class="tabcordion" data-tabcordion-scroll="none">
	tabcordion with scroll disabled
</div>

<div class="tabcordion" data-tabcordion-scroll="200">
	tabcordion with 200px scroll offset
</div>

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
4.0.0

Collapsible elements

Collapse and expand content elements.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex11-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex22-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex33-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex44-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3400">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1400" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3400" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3400" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Tabcordions and scrolling

The tabcordions scrolls the current active tab into view to make sure users don’t get lost when a large amount of content is moved in and out of view. By default it will scroll the page to the top of the viewport which is great for most websites. However sometimes a website has a fixed element like a header bar on the top that may obstruct the view. Other times the scroll can confuse more than it helps. The tabcordion allows you to adjust this behavior. The data-tabcordion-scroll on the outer most wrapping HTML tag overwrites the default behavior to your use case. Use data-tabcordion-scroll="100" to offset the scroll by 100px or data-tabcordion-scroll="none" to disable the scroll all together.

<div class="tabcordion" data-tabcordion-scroll="none">
	tabcordion with scroll disabled
</div>

<div class="tabcordion" data-tabcordion-scroll="200">
	tabcordion with 200px scroll offset
</div>

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
4.1.0

Collapsible elements

Collapse and expand content elements.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex11-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex22-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex33-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex44-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion with single item

Accordion element with a single item.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex10-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex10-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion with single item

Accordion element with a single item and a stronger styling option.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex11-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex11-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3410" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Tabcordions and scrolling

The tabcordions scrolls the current active tab into view to make sure users don’t get lost when a large amount of content is moved in and out of view. By default it will scroll the page to the top of the viewport which is great for most websites. However sometimes a website has a fixed element like a header bar on the top that may obstruct the view. Other times the scroll can confuse more than it helps. The tabcordion allows you to adjust this behavior. The data-tabcordion-scroll on the outer most wrapping HTML tag overwrites the default behavior to your use case. Use data-tabcordion-scroll="100" to offset the scroll by 100px or data-tabcordion-scroll="none" to disable the scroll all together.

<div class="tabcordion" data-tabcordion-scroll="none">
	tabcordion with scroll disabled
</div>

<div class="tabcordion" data-tabcordion-scroll="200">
	tabcordion with 200px scroll offset
</div>

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
4.1.1

Collapsible elements

Collapse and expand content elements.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex11-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex22-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex33-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex44-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion with single item

Accordion element with a single item.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex10-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex10-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion with single item

Accordion element with a single item and a stronger styling option.

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex11-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex11-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.

Demo

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex88-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab2411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab2411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex88-tab3411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex88-tab3411" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Tabcordions and scrolling

The tabcordions scrolls the current active tab into view to make sure users don’t get lost when a large amount of content is moved in and out of view. By default it will scroll the page to the top of the viewport which is great for most websites. However sometimes a website has a fixed element like a header bar on the top that may obstruct the view. Other times the scroll can confuse more than it helps. The tabcordion allows you to adjust this behavior. The data-tabcordion-scroll on the outer most wrapping HTML tag overwrites the default behavior to your use case. Use data-tabcordion-scroll="100" to offset the scroll by 100px or data-tabcordion-scroll="none" to disable the scroll all together.

<div class="tabcordion" data-tabcordion-scroll="none">
	tabcordion with scroll disabled
</div>

<div class="tabcordion" data-tabcordion-scroll="200">
	tabcordion with 200px scroll offset
</div>

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
4.1.2

Collapsible elements

Collapse and expand content elements.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-link js-collapsible" data-collapsible="#UNIQUE-ID">YOUR BUTTON</button>

<div id="UNIQUE-ID" class="collapsible-body" aria-hidden="true" tabindex="-1">
	YOUR CONTENT
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

Use tab elements to switch between different views or content, soft styling reduces emphasis. Avoid wrapping labels in tabs.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex11-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex11-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex22-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex22-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex33-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex33-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

As above, allowing tabs to span the full width of the container.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex44-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex44-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

Use accordion elements to vertically stack related content. Each item can be expanded to reveal the content associated with that item. Only 1 item can be opened (active) at a time. Any item in the accordion can be the default opened item.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab2412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex55-tab3412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion with single item

Accordion element with a single item.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex10-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex10-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab2412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex66-tab3412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion with single item

Accordion element with a single item and a stronger styling option.

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex11-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex11-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

A tab set that changes to an accordion based on break point, soft styling reduces emphasis.

Demo

What’s new since v4.1.1

This version changed: CSS/LESS, but not HTML JS
  • Updated border radius to 3px (#392)

What’s new since v4.1.0

This version changed: CSS/LESS, but not HTML JS
  • Tweaked border and fill styling of lego accordion (#313)
  • Added 'tabcordion-accordion-borderless' modifier class to remove outer border. Useful for instances where accordion is used within a panel or other container.

What’s new since v4.0.0

This version changed: JS but not CSS/LESS, HTML
  • Added support for toggle functionality for tabcordion accordion's with a single item. Previously worked with 2 or more items only. (#287)

What’s new since v3.0.0

This version changed: CSS/LESS, HTML and JS
  • Tabcordions gain a helper. The WCAG has long been struggling with how to use arrow keys vs the tab key for keyboard users. This update is an attempt to help both use cases while improving the overall usability of tabs. (#283)
  • The body of the tabcordion was transparent. We don’t have casual Friday here at the GUI headquarter and put the tabcordion in the proper attire. (#275)

What’s new since v2.0.1

This version changed: CSS/LESS, HTML and JS
  • Tabcordions have this really neat class that makes all tabs equal heights which looks really rad! Unless it doesn’t work. Then it looks bad, less rad. No more. (#237)
  • Justified tabs unjustified in the mobile breakpoint. That was deemed unjust and they now justify again! Justice served. (#238)
  • Scrolling can now be disabled or adjusted by an offset. If you have a fixed header and need the tabcordion to scroll a little less, NOW is your time! (#245)
  • We made improvements to our A11Y. Now all links come with underlines so you can tell them apart by color AND shape. Also A11Y means "accessibility" for all who were wondering. (#247)
  • One last little big thing: We added some attributes to help screenreaders to understand what tab is open. Another win for A11Y! (#258)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex77-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab2412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab2412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

	<div class="tabcordion-body-header js-collapsible-tab">
		<a href="#ex77-tab3412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex77-tab3412" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

LESS

The main mixin is called: _tabcordions(WBC)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

A tab set that changes to an accordion based on break point, prominent "Lego" styling highlights your content.