This version of this component hasn't been branded yet.

Please check the latest version, 4.4.4, as branding is a relatively new addition to our components.

o-expander

Accessible, content-aware widget for expanding and collapsing content

active

Simple

Simple use cases

<h1>Button toggle</h1>
<div data-o-component="o-expander" class="o-expander items" data-o-expander-shrink-to="2" data-o-expander-count-selector="li">
	<h2>Collapsing to number of items in a list</h2>
	<ul class="o-expander__content">
		<li>item</li>
		<li>item</li>
		<li>item</li>
		<li>item</li>
	</ul>
	<button class="o-expander__toggle o--if-js">Toggle</button>
</div>

<div data-o-component="o-expander" class="o-expander height" data-o-expander-shrink-to="height">
	<h2>Collapsing to height of content (resize window to see toggle appear and disappear in a content-aware manner)</h2>
	<div class="o-expander__content">
		word word word word word word word word word word word word word word word word word word word word word word
	</div>
	<button class="o-expander__toggle o--if-js">Toggle</button>
</div>


<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="hidden">
	<h2>Hiding content</h2>
	<div class="o-expander__content">
		word word word word word word word word word word word word word word word word word word word word word word
	</div>
	<button class="o-expander__toggle o--if-js">Toggle</button>
</div>

<br>
<br>
<br>

<h1>Link toggle</h1>
<div data-o-component="o-expander" class="o-expander items" data-o-expander-shrink-to="2" data-o-expander-count-selector="li">
	<h2>Collapsing to number of items in a list</h2>
	<ul class="o-expander__content">
		<li>item</li>
		<li>item</li>
		<li>item</li>
		<li>item</li>
	</ul>
	<a href="#" class="o-expander__toggle o--if-js">Toggle</a>
</div>

<div data-o-component="o-expander" class="o-expander height" data-o-expander-shrink-to="height">
	<h2>Collapsing to height of content (resize window to see toggle appear and disappear in a content-aware manner)</h2>
	<div class="o-expander__content">
		word word word word word word word word word word word word word word word word word word word word word word
	</div>
	<a href="#" class="o-expander__toggle o--if-js">Toggle</a>
</div>


<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="hidden">
	<h2>Hiding content</h2>
	<div class="o-expander__content">
		word word word word word word word word word word word word word word word word word word word word word word
	</div>
	<a href="#" class="o-expander__toggle o--if-js">Toggle</a>
</div>
Bower Dependencies
o-viewport >=1.2.0 <4
o-icons >=4.4.2 <6
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-expander@^4.3.0

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-expander"@"^4.3.0"

For more information see the Origami build process.