npm:@yuki0410/minimal-collapse

README

MinimalCollapse.js

Minimal and Tiny Javascript Library for Collapse

The aim of this library is to easily introduce a minimalistic collapse. It is a library of only about 5KB.

Features

✔ Toggles aria-hidden attributes

✔ Open & Close with CSS Transition

✔ Make By Typescript

✔ Supported for IE11+ (with Polyfill)

Install

via npm

npm install @yuki0410/minimal-collapse --save

// Common.JS
const MinimalCollapse = require('@yuki0410/minimal-collapse');

// ESModules
import MinimalCollapse from '@yuki0410/minimal-collapse';

via CDN direct link

<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
<script src="https://cdn.jsdelivr.net/npm/@yuki0410/minimal-collapse/dist/minimal-collapse.min.js"></script>

direct download

curl -o https://cdn.jsdelivr.net/npm/@yuki0410/minimal-collapse/dist/minimal-collapse.min.js

<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
<script src="/path/to/minimal-collapse.min.js"></script>

Usage

Styling

<div class="collapse" area-hidden="true" id="collapse1"><!-- must be not inline element-->
  <div class="collapse__inner"><!-- must be not inline element-->
    Contents
  </div>
</div>

/**
 * need styles
 */
.collapse {
  height: 0;
  overflow-y: hidden;
  transition: height .3s; /** custom height transition */
  /** must be padding 0 */
}

.collapse[area-hidden="false"] {
  height: auto;
  overflow-y: visible;
  /** must be margin 0 */
}

automatic

MinimalCollapse.activate();

demo

manual

const collapse = document.querySelector('#someCollapse');

// open
MinimalCollapse.show(collapse);

// close
MinimalCollapse.close(collapse);

// toggle
MinimalCollapse.toggle(collapse);

demo

Changelog

Refer to the releases page.

Contribution

Fork the repository on GitHub
Clone the project to your own machine
Commit changes to your own branch
Push your work back up to your fork
Submit a Pull request so that we can review your changes

NOTE: Be sure to merge the latest from "upstream" before making a pull request!

Licence

This project is licensed under MIT license.

Created and maintained by

@yuki0410_ 🇯🇵

Usage no npm install needed!