@threespot/expand-toggle

Expand Toggle

Simple and accessible expandable functionality, similar to jQuery’s slideToggle() method.

Inspired by https://inclusive-components.design/menus-menu-buttons#truemenus.

Install

yarn add @threespot/expand-toggle

Usage

JavaScript

import ExpandToggle from "@threespot/expand-toggle";

const toggles = document.querySelectorAll("[data-expands]");

// ES6
toggles.forEach(el => new ExpandToggle(el));

// ES5
for (var i = 0, len = toggles.length; i < len; i++) {
  new ExpandToggle(toggles[i]);
}

Styles

The following minimum styles are required:

// This class name is just an example
.expandable {
  $transition-speed: 400ms;

  // Expanded state
  &,
  .js &[aria-hidden="false"] {
    overflow: hidden;
    transition: max-height $transition-speed ease-in-out,
                visibility 0s linear 0s;
    visibility: visible;
  }

  // Collapsed state
  &[aria-hidden="true"],
  // Selector below prevents a flash of unstyled content (FOUC)
  .js &:not([aria-hidden]) {
    max-height: 0 !important;// !important required to override inline styles added by JS
    transition: max-height $transition-speed ease-in-out,
                visibility 0s linear $transition-speed;
    visibility: hidden;
  }
}

// We also suggest hiding the button when JS is disabled.
// Note: Modernizr looks for a “no-js” class on the html tag and replaces it with “js” on load.
//       If not using Modernizr, see https://www.paulirish.com/2009/avoiding-the-fouc-v3/
.no-js [data-expands] {
  display: none;
}

Markup

<button type="button" data-expands="demo" data-expands-class="is-expanded" data-expands-height>
  <span data-expands-text="Close">Open</span>
</button>

<div class="expandable" id="demo">
  <p>This content will be hidden to start.</p>
</div>

Options

data-expands-class defines a class (or multiple classes) to apply to the toggle button and expandable element when expanded

data-expands-height transitions the menu height using max-height and CSS transitions (see required CSS above)

data-expands-text defines button text to use when expanded

These options can also be set in JavaScript:

new ExpandToggle(el, {
  expandedClasses: "is-expanded",
  shouldToggleHeight: true,
  activeToggleText: "Close",
});

Events

ready

Since the ready event may be trigger immediately, bind using the onReady option:

const toggle = new ExpandToggle(el, {
  onReady: function() {
    console.log('ready');
  }
});

expand

Triggered when component is expanded

toggle.on('expand', function() {
  console.log('expand');
});

collapse

Triggered when component is collapsed

toggle.on('collapse', function() {
  console.log('collapse');
});

destroy

Triggered when component is destroyed

toggle.on('destroy', function() {
  console.log('destroy');
});

License

This is free software and may be redistributed under the terms of the MIT license.

About Threespot

Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at https://www.threespot.com.