ミニマルなアコーディオンライブラリをnpmで公開しました

ミニマルなモーダルライブラリ(MinimalCollapse.js)を自作してみたので紹介します。

MinimalCollapse.js 🤔

TypeScript で作成された、軽量かつ最小限の機能のアコーディオンライブラリです。

なんでこのライブラリ作ったの？ 🤔

アコーディオンを実現するライブラリはたくさんありますが、余計なスタイルを打ち消すのが大変だったり、jQuery を使っていたりしたので、最小限の機能とスタイルで実装できるアコーディオンライブラリを作ってみました。

機能 😋

• aria-hidden の true/false の切り替え
• 開閉アニメーションを CSS Transition でカスタムできる
• TypeScript 製
• IE11 をサポート(要 Polyfill)

導入方法 🚀

npm 経由

Console

% npm install @yuki0410/minimal-collapse --save

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

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

CDN 経由

<script src="https://cdn.jsdelivr.net/npm/@yuki0410/minimal-collapse/dist/minimal-collapse.min.js"></script>

直接ダウンロード

Console

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

使い方 📄

ベース

<!-- インラインエレメントであってはらない-->
<div class="collapse" area-hidden="true" id="collapse1">
  <!-- インラインエレメントであってはらない-->
  <div class="collapse__inner">Contents</div>
</div>

/**
 * need styles
 */
.collapse {
  height: 0;
  overflow-y: hidden;
  transition: height .3s; /** custom height transition */
  /** padding 0 であること */
}

.collapse[area-hidden="false"] {
  height: auto;
  overflow-y: visible;
  /** margin 0 であること */
}

自動

MinimalCollapse.activate();

→ 　デモ

手動

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

// open
MinimalCollapse.show(collapse);

// close
MinimalCollapse.close(collapse);

// toggle
MinimalCollapse.toggle(collapse);

→ 　デモ

ライセンス 🔒

MIT

npm

@yuki0410/minimal-collapse

Github

ohnaka0410/minimal-collapse

まとめ

名前の通り シンプル かつ使いやすいライブラリになるようにメンテしていこうと思います。