Origami Frontend Components & Services

Demos: o-expander

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 to the expander&apos;s content element 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">Toggle</button>
</div>

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">Toggle</button>
</div>

Collapsing Hidden

<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="hidden">
	<div class="o-expander__content">
		In this &quot;collapsing hidden&quot; demo all content is hidden/shown on click.
	</div>
	<button class="o-expander__toggle">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-item-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">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">Toggle</button>
</div>
Switch component view

GitHub Repository

Install o-expander

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

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

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