❤Next Perpendicular Moonlanding

npm

Sign UpSign In
Have ideas to improve npm?Join in the discussion! »

@threespot/expand-toggle

1.6.2 • Public • Published

Expand Toggle

npm Build Status Coverage Status

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.

Threespot

Keywords

Install

npm i @threespot/expand-toggle

DownloadsWeekly Downloads

109

Version

1.6.2

License

MIT

Unpacked Size

1.92 MB

Total Files

58

Homepage

threespot.github.io/expand-toggle/

Repository

Gitgithub.com/Threespot/expand-toggle

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
Try on RunKit
Report malware