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.

loading example… 
<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.

loading example… 
<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
loading example… 
<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.

loading example… 
<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.

loading example…

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.

loading example…

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
loading example…

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.

loading example…

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)

Tabcordions

1.0.0

Collapsible elements

Collapse and expand content elements.

loading example… 
<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.

loading example… 
<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.

loading example… 
<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.

loading example… 
<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.

loading example… 
<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.

loading example… 
<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.

loading example… 
<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
loading example… 
<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
loading example… 
<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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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
loading example…

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
loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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
loading example…

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
loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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
loading example…

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
loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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.

loading example…

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
loading example…

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
loading example…

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)

Wells

1.0.0

Similar to panels, without the header or footer. Using a responsive well will apply additional padding at larger break points.

Demo
loading example… 
<div class="well">
	Look, I&rsquo;m a basic well - you can use me to group content.
</div>

<div class="well well-responsive">
	Look, I&rsquo;m in a well and my paddings are responsive!
</div>

CSS

Modifier class:
  • well-responsive

LESS

The main mixin is called: _wells(WBC)
2.0.0

Similar to panels, without the header or footer. Using a responsive well will apply additional padding at larger break points.

Demo
loading example…

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="well">
	Look, I&rsquo;m a basic well - you can use me to group content.
</div>

<div class="well well-responsive">
	Look, I&rsquo;m in a well and my paddings are responsive!
</div>

CSS

Modifier class:
  • well-responsive

LESS

The main mixin is called: _wells(WBC)
2.0.1

Similar to panels, without the header or footer. Using a responsive well will apply additional padding at 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="well">
	Look, I&rsquo;m a basic well - you can use me to group content.
</div>

<div class="well well-responsive">
	Look, I&rsquo;m in a well and my paddings are responsive!
</div>

CSS

Modifier class:
  • well-responsive

LESS

The main mixin is called: _wells(WBC)