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 "collapsing height" demo we have set a maximum height to the expander'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>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>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>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>