native slide toggle

Vanilla JS mobile friendly version of jQuery.slideToggle

about

slide toggle to open or close content using CSS transition and transitionend event.

demo

• native slide toggle vs jQuery.slideToggle http://codepen.io/kunukn/full/yaYvrp/

browser support

| | | | | | | |:---:|:---:|:---:|:---:|:---:|:---:| | 50+ ✅ | 40+ ✅ | 9+ ✅ | 40+ ✅ | 12+ ✅ | 11+ ✅ |

features

• Small library - JS is ~3kb minified and CSS is ~900 bytes minified
• CSS max-height transition on dynamically calculated height value
• Simple html structure with minimum CSS class usage
• Max-height is dynamically set and reset after the animation
• Tabbing is supported
• Vanilla JS, no other dependency

usage

Check the index.html for inspiration.

• Add reference to nst.min.js and nst.min.css in the html page
• Apply the markup structure
• Apply custom css to override the library css

html structure

Basic example

 <div class="nst-component">
    <button class="nst-toggle">toggle</button>
    <div class="nst-content">
      <div>
        Your content here
      </div>
    </div>
  </div>

nst-component must be a parent element to the nst-content element and the nst-toggle element. The extra div inside the nst-content is for padding and to make the open/close animation look similar to jQuery.slideToggle.

configuration

If you want to start with collapsed state add nst-is-collapsed class to the component. e.g.

 <div class="nst-component nst-is-collapsed">
    <button class="nst-toggle">toggle</button>
    <div class="nst-content">
      <div>
        Your content here
      </div>
    </div>
  </div>

If you want to manually init the component then add the nst-manual-init class to the component. e.g.

 <div class="nst-component nst-manual-init" id="i-want-to-manually-init-this">
    <button class="nst-toggle">toggle</button>
    <div class="nst-content">
      <div>
        Your content here
      </div>
    </div>
  </div>

var myComponentElement = document.getElementById('i-want-to-manually-init-this');
nst.init(myComponentElement);

how does it work?

This uses CSS transition on max-height value. The max-height is dynamically set and removed with JS during expanding and collapsing. The height value is calculated dynamically based on the content. You can rotate the device or resize the browser window where the height is dynamically adjusted.

development

• Git clone the project or download it
• npm install
• npm run start

For minification

• npm run deploy

supported browsers

Browsers which supports requestAnimationFrame, transitionend event, css max-height transition, document.querySelector and Ecmascript 5.

performance

The max-height triggers layout, paint and composite but is faster than JS animation. https://csstriggers.com/max-height

license

MIT