Origami Frontend Components & Services

Demos: o-expander active

This version of o-expander hasn't been branded yet. Please check the latest version, 4.6.1, as branding is a relatively new addition to our components.

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>
Switch component view

GitHub Repository

Install o-expander

If using the Build Service, add o-expander@^4.4.4 to your script and link tags.

If running a Manual Build, run bower install --save "o-expander@^4.4.4".

Help & Support

o-expander is maintained directly by the Origami team. If you have any questions about o-expander or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com