Demos: o-expander

<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>

<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>

<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>

<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>

<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>