Nunjucks Powers Mozilla

    @yuki0410/minimal-collapse
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.4 • Public • Published

    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 @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

    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

    @yuki0410_ 🇯🇵

    Install

    npm i @yuki0410/minimal-collapse

    DownloadsWeekly Downloads

    1

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    107 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuki0410