@ohnaka0410/minimal-collapsedeprecated

Minimal and Tiny Javascript Library for Collapse

Usage no npm install needed!

<script type="module">
  import ohnaka0410MinimalCollapse from 'https://cdn.skypack.dev/@ohnaka0410/minimal-collapse';
</script>

README

MinimalCollapse.js

licence npm minified size dependencies downloads

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 @ohnaka0410/minimal-collapse --save

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

// ESModules
import { MinimalCollapse } from '@ohnaka0410/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/@ohnaka0410/minimal-collapse@v1.1.0/dist/minimal-collapse.min.js"></script>

direct download

curl -o https://cdn.jsdelivr.net/npm/@ohnaka0410/minimal-collapse@v1.1.0/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

  1. Fork the repository on GitHub
  2. Clone the project to your own machine
  3. Commit changes to your own branch
  4. Push your work back up to your fork
  5. 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

@ohnaka0410 🇯🇵