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
Switch component view

GitHub Repository

Install o-expander

If using the Build Service, add o-expander@^6.0.0 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@^6.0.0".

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