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>
Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-expander

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-expander@^5.0.11".

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: #origami-support
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: #origami-support
Email: origami.support@ft.com