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

Collapsing List

A list which collapses, hiding a number of items.

<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="2">
	<ul class="o-expander__content">
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
	</ul>
	<button class="o-expander__toggle o--if-js">Toggle</button>
</div>

Collapsing Height

Collapses based on the max-height of the content.

<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="height" data-o-expander-collapsed-toggle-text="Toggle: Click To Expand" data-o-expander-expanded-toggle-text="Toggle: Click To Collapse">
	<div class="o-expander__content">
		In this &quot;collapsing height&quot; demo we have set a maximum height and hidden overflow for the expander with custom demo CSS. The toggle will remain hidden unless this content overflows the expander. In this example it will overflow when viewed within a small viewport. Open this demo in a new tab and resize the window to see the toggle appear/disappear in a content-aware manner.
	</div>
	<button class="o-expander__toggle o--if-js">
		Toggle
	</button>
</div>

Collapsing Selector

A selector is configured to hide paragraphs.

<div data-o-component="o-expander" class="o-expander items" data-o-expander-shrink-to="2" data-o-expander-count-selector="p" data-o-expander-expanded-toggle-text="less">
	<div class="o-expander__content">
		<p>
			In this demo we see an expander which hides based on the `p` selector, which we have configured using data attributes.
		</p>
		<p>
			Here is a second paragraph.
		</p>
		<p>
			And finally we see a third paragraph.
		</p>
	</div>
	<a href="#" class="o-expander__toggle o--if-js">read more</a>
</div>

Toggle State

The toggle state is set to never update the toggle copy.

<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="2" data-o-expander-toggle-state="aria">
	<ul class="o-expander__content">
		<li>Toggle State: There are more options for `o-expander` such as this, where toggle copy is not updated on click but aria attributes still are.<br>See the Github readme to explore more options.</li>
		<li>Item 2</li>
		<li>Item 3</li>
		<li>Item 4</li>
	</ul>
	<button class="o-expander__toggle o--if-js">Toggle</button>
</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.4.2

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.4.2"

For more information see the Origami build process.