Collapsing Height

<divdata-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"><divclass="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><buttonclass="o-expander__toggle o--if-js">
Toggle
</button></div>

Collapsing Selector

<divdata-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"><divclass="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><ahref="#"class="o-expander__toggle o--if-js">read more</a></div>

Toggle State

<divdata-o-component="o-expander"class="o-expander"data-o-expander-shrink-to="2"data-o-expander-toggle-state="aria"><ulclass="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><buttonclass="o-expander__toggle o--if-js">Toggle</button></div>