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

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! 👏
<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(BT)

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! 👏
<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(BT)

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! 👏
<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(BT)

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! 👏
<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(BT)
2.0.2

Panel

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)

Faint panel

Places less emphasis on the panel.

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)

Responsive panel

Applies additional padding for larger break points.

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)

Panel with table

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

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)

Tabcordions

2.0.1

Collapsible elements

Collapse and expand content elements.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

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

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

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

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true
3.0.0

Collapsible elements

Collapse and expand content elements.

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs - justified

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs

A stronger styling option for tabs.

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabs - justified

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft accordion

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego accordion

A stronger styling option for accordions.

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabcordion

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

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Lego tabcordion

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

Demo

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
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! 👏
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
<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(BT)
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! 👏
4.1.0

Collapsible elements

Collapse and expand content elements.

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

LESS

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

Soft tabs - justified

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

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

Lego tabs

A stronger styling option for tabs.

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Lego tabs - justified

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

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

Soft accordion

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

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

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

CSS

Modifier class:
  • tabcordion-accordion

LESS

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

Soft accordion with single item

Accordion element with a single item.

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex10-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex10-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

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

Lego accordion

A stronger styling option for accordions.

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

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

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Lego accordion with single item

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex11-tab1410" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex11-tab1410" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Soft tabcordion

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

Demo

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

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

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

LESS

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

Lego tabcordion

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

Demo

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3410">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

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

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Tabcordions and scrolling

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

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

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

Collapsible elements

Collapse and expand content elements.

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

LESS

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

Soft tabs - justified

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

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

Lego tabs

A stronger styling option for tabs.

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Lego tabs - justified

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

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

Soft accordion

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

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

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

CSS

Modifier class:
  • tabcordion-accordion

LESS

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

Soft accordion with single item

Accordion element with a single item.

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex10-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex10-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

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

Lego accordion

A stronger styling option for accordions.

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

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

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Lego accordion with single item

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex11-tab1411" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex11-tab1411" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Soft tabcordion

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

Demo

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

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

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

LESS

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

Lego tabcordion

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

Demo

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3411">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

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

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Tabcordions and scrolling

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

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

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

Collapsible elements

Collapse and expand content elements.

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<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(BT)
This module comes with the usual init method and three public methods:
  • GUI.tabcordion.init(); after the page has been loaded.
  • GUI.tabcordion.render(); for dynamically added elements after page load.
  • GUI.collapsible.toggle( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.collapsible.open( target, _isAnimated, Callback, withFocus )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion
    • @param withFocus [boolean] Should the focus move to the opened element? Default true

Soft tabs

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

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex11-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex11-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

LESS

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

Soft tabs - justified

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

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex22-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex22-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

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

Lego tabs

A stronger styling option for tabs.

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex33-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex33-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Lego tabs - justified

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

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-tabs">
	<ul class="tabcordion-tabs tabcordion-tabs-justified">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex44-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex44-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

CSS

Modifier class:
  • tabcordion-tabs-justified

LESS

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

Soft accordion

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

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex55-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex55-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

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

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

CSS

Modifier class:
  • tabcordion-accordion

LESS

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

Soft accordion with single item

Accordion element with a single item.

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex10-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex10-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion

LESS

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

Lego accordion

A stronger styling option for accordions.

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex66-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex66-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>

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

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Lego accordion with single item

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

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego tabcordion-accordion">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex11-tab1412" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex11-tab1412" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Soft tabcordion

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

Demo

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex77-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex77-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

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

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

LESS

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

Lego tabcordion

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

Demo

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex88-tab1412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab2412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
		<li class="tabcordion-tab js-collapsible-tab">
			<a class="js-collapsible" href="#ex88-tab3412">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

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

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

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

CSS

Modifier class:
  • tabcordion-lego

LESS

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

Tabcordions and scrolling

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

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

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

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

Collapsible elements

Collapse and expand content elements.

Demo

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<button class="btn btn-{TYPE} 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(BT)
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

Tabs

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

Demo

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Default (soft) tabs -->
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex2a-tab1413">
				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="#ex2a-tab2413">
				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="#ex2a-tab3413">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex2a-tab1413" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2a-tab2413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2a-tab3413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Default (soft) tabs - justified -->
<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="#ex2b-tab1413">
				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="#ex2b-tab2413">
				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="#ex2b-tab3413">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex2b-tab1413" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2b-tab2413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2b-tab3413" 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(BT)
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.

Demo

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Lego tabs -->
<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="#ex3a-tab1413">
				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="#ex3a-tab2413">
				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="#ex3a-tab3413">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex3a-tab1413" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3a-tab2413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3a-tab3413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Lego tabs - justified -->
<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="#ex3b-tab1413">
				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="#ex3b-tab2413">
				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="#ex3b-tab3413">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex3b-tab1413" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3b-tab2413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3b-tab3413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(BT)
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

Default (soft) accordion

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

Optional: Use the .tabcordion-accordion-borderless modifier class to go borderless.

Demo

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Default (soft) accordion -->
<div class="tabcordion tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex4a-tab1413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4a-tab1413" 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="#ex4a-tab2413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4a-tab2413" 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="#ex4a-tab3413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4a-tab3413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Default (soft) accordion with single item -->
<div class="tabcordion tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex4b-tab1413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4b-tab1413" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion
  • tabcordion-accordion-borderless

LESS

The main mixin is called: _tabcordions(BT)
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.

Optional: Use the .tabcordion-accordion-borderless modifier class to go borderless.

Demo

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Lego accordion -->
<div class="tabcordion tabcordion-lego tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex5a-tab1413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5a-tab1413" 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="#ex5a-tab2413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5a-tab2413" 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="#ex5a-tab3413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5a-tab3413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Lego accordion with single item -->
<div class="tabcordion tabcordion-lego tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex5b-tab1413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5b-tab1413" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego
  • tabcordion-accordion
  • tabcordion-accordion-borderless

LESS

The main mixin is called: _tabcordions(BT)
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

A tab set that changes to an accordion based on breakpoint. Tabcordions may be styled in default (soft) or lego styling.

Demo

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Default (soft) tabcordion -->
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex6a-tab1413">
				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="#ex6a-tab2413">
				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="#ex6a-tab3413">
				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="#ex6a-tab1413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6a-tab1413" 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="#ex6a-tab2413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6a-tab2413" 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="#ex6a-tab3413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6a-tab3413" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Lego tabcordion -->
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex6b-tab1413">
				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="#ex6b-tab2413">
				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="#ex6b-tab3413">
				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="#ex6b-tab1413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6b-tab1413" 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="#ex6b-tab2413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6b-tab2413" 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="#ex6b-tab3413" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6b-tab3413" 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(BT)
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

Tabcordions will auto-scroll the currently active tab or accordion panel into view to aid users’ reading experience. The active element will scroll to the top of the viewport by default, but this won’t necessarily work in all situations. Sometimes a website may have a fixed header bar at the top obstructing the view or the auto-scroll may simply cause confusion. This behaviour can be easily adjusted.

Use the data-tabcordion-scroll attribute to overwrite the default behavior to suit. Use data-tabcordion-scroll="100" to offset the scroll by 100px or data-tabcordion-scroll="none" to disable the scroll altogether.

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

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

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

Collapsible elements

Collapse and expand content elements.

Demo

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<button class="btn btn-{TYPE} 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(BT)
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

Tabs

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

Demo

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Default (soft) tabs -->
<div class="tabcordion tabcordion-tabs">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex2a-tab1414">
				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="#ex2a-tab2414">
				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="#ex2a-tab3414">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex2a-tab1414" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2a-tab2414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2a-tab3414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Default (soft) tabs - justified -->
<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="#ex2b-tab1414">
				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="#ex2b-tab2414">
				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="#ex2b-tab3414">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex2b-tab1414" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2b-tab2414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex2b-tab3414" 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(BT)
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.

Demo

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Lego tabs -->
<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="#ex3a-tab1414">
				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="#ex3a-tab2414">
				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="#ex3a-tab3414">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex3a-tab1414" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3a-tab2414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3a-tab3414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Lego tabs - justified -->
<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="#ex3b-tab1414">
				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="#ex3b-tab2414">
				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="#ex3b-tab3414">
				YOUR TAB
				<span class="tabcordion-tab-helper" aria-hidden="true">
					Use the arrow keys to select a tab.
				</span>
			</a>
		</li>
	</ul>

	<div id="ex3b-tab1414" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3b-tab2414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
	<div id="ex3b-tab3414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego
  • tabcordion-tabs-justified

LESS

The main mixin is called: _tabcordions(BT)
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

Default (soft) accordion

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

Optional: Use the .tabcordion-accordion-borderless modifier class to go borderless.

Demo

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Default (soft) accordion -->
<div class="tabcordion tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex4a-tab1414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4a-tab1414" 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="#ex4a-tab2414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4a-tab2414" 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="#ex4a-tab3414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4a-tab3414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Default (soft) accordion with single item -->
<div class="tabcordion tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex4b-tab1414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex4b-tab1414" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-accordion
  • tabcordion-accordion-borderless

LESS

The main mixin is called: _tabcordions(BT)
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.

Optional: Use the .tabcordion-accordion-borderless modifier class to go borderless.

Demo

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Lego accordion -->
<div class="tabcordion tabcordion-lego tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex5a-tab1414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5a-tab1414" 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="#ex5a-tab2414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5a-tab2414" 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="#ex5a-tab3414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5a-tab3414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Lego accordion with single item -->
<div class="tabcordion tabcordion-lego tabcordion-accordion [tabcordion-accordion-borderless]">
	<div class="tabcordion-body-header js-collapsible-tab is-active">
		<a href="#ex5b-tab1414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex5b-tab1414" class="collapsible-body is-open" aria-hidden="false" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

CSS

Modifier class:
  • tabcordion-lego
  • tabcordion-accordion
  • tabcordion-accordion-borderless

LESS

The main mixin is called: _tabcordions(BT)
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

A tab set that changes to an accordion based on breakpoint. Tabcordions may be styled in default (soft) or lego styling.

Demo

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
<!-- Default (soft) tabcordion -->
<div class="tabcordion">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex6a-tab1414">
				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="#ex6a-tab2414">
				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="#ex6a-tab3414">
				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="#ex6a-tab1414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6a-tab1414" 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="#ex6a-tab2414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6a-tab2414" 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="#ex6a-tab3414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6a-tab3414" class="collapsible-body" aria-hidden="true" tabindex="-1">
		<div class="tabcordion-body">
			YOUR TEXT
		</div>
	</div>
</div>

<!-- Lego tabcordion -->
<div class="tabcordion tabcordion-lego">
	<ul class="tabcordion-tabs">
		<li class="tabcordion-tab js-collapsible-tab is-active">
			<a class="js-collapsible" href="#ex6b-tab1414">
				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="#ex6b-tab2414">
				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="#ex6b-tab3414">
				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="#ex6b-tab1414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6b-tab1414" 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="#ex6b-tab2414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6b-tab2414" 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="#ex6b-tab3414" class="tabcordion-body-headline js-collapsible">YOUR TAB</a>
	</div>
	<div id="ex6b-tab3414" 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(BT)
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

Tabcordions will auto-scroll the currently active tab or accordion panel into view to aid users’ reading experience. The active element will scroll to the top of the viewport by default, but this won’t necessarily work in all situations. Sometimes a website may have a fixed header bar at the top obstructing the view or the auto-scroll may simply cause confusion. This behaviour can be easily adjusted.

Use the data-tabcordion-scroll attribute to overwrite the default behavior to suit. Use data-tabcordion-scroll="100" to offset the scroll by 100px or data-tabcordion-scroll="none" to disable the scroll altogether.

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

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

What’s new since v4.1.3

This version changed: CSS/LESS, but not HTML, JS
  • Ensuring open collapsibles don’t chop overflow; was affecting offset focus outlines

What’s new since v4.1.2

This version changed: CSS/LESS, but not HTML JS
  • Updating the accordion toggle icon and removing the indicator arrow (#402)
  • Removing top border from borderless lego accordion, as per borderless default (non-lego) accordion

What’s new since v4.1.1

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

What’s new since v4.1.0

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

What’s new since v4.0.0

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

What’s new since v3.0.0

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

What’s new since v2.0.1

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

What’s new since v2.0.0

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

Wells

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! 👏
<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(BT)
2.0.2

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.1

This version changed: CSS/LESS but not: HTML, JS
  • Changed Well background colour to @color-Light (#375)
  • Reduced CSS specificity

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! 👏
<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(BT)