Skip to content
Lightweight Vanilla Javascript Collapse No Need any Dependency.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
favicon.ico
package.json
readme.md
rollup.config.js
webpack.config.js
webpack.mix.js

readme.md

CollapseJs

NPM version MIT License

Lightweight Vanilla Javascript Collapse No Need any Dependency.

It's Easy as 123, No Dependency, No Conflicts

See Live Demo

Installation

npm i collapsejs --save-dev

or use cdn

<script src="https://unpkg.com/collapsejs/dist/collapsejs.min.js"></script>

and include this style

.collapse__body {
    overflow: hidden;
    transition: height .15s;
}

Concept

<!-- Default -->
<div class="collapse__header">Header 1</div>
<div class="collapse__body">Body 1</div>

<div class="collapse__header">Header 2</div>
<div class="collapse__body">Body 2</div>

...

if you have multiple collapse on one page you need to wrap like this

<!-- Collapse 1 -->
<div class="collapse-1">
  <div class="collapse__header">Header 1</div>
  <div class="collapse__body">Body 1</div>

  <div class="collapse__header">Header 2</div>
  <div class="collapse__body">Body 2</div>
</div>


<!-- Collapse 2 -->
<div class="collapse-2">
  <div class="collapse__header">Header 1</div>
  <div class="collapse__body">Body 1</div>

  <div class="collapse__header">Header 2</div>
  <div class="collapse__body">Body 2</div>
</div>

here is the javascript initialize code for multiple

new collapsejs({
  container: '.collapse-1'
})

new collapsejs({
  container: '.collapse-2'
})

Quick Usage

<!DOCTYPE html>
<html>
<head>
  <!-- Styles -->
  <style type="text/css">
    .collapse__body {
      overflow: hidden;
      transition: height .15s;
    }
  </style>
</head>
<body>
  <div class="collapse__header">Header 1</div>
  <div class="collapse__body">Body 1</div>

  <div class="collapse__header">Header 2</div>
  <div class="collapse__body">Body 2</div>


  <!-- Scripts -->
  <script src="https://unpkg.com/collapsejs/dist/collapsejs.min.js"></script>
  <script type="text/javascript">
    new collapsejs
  </script>
</body>
</html>

Options

here is the default options list:

new collapsejs({
    container:      '', // collapse wrap id or class e.g. #collapse-1 or .collapse-1
    header:         '.collapse__header', // header class
    body:           '.collapse__body', // body class
    closed:         false, // if true initially all bodies will be closed
    multiple:       false, // multiple collapse expand
    collapsible:    false, // if true and multiple false then single item also collapsible.
    defaultOpen:    1 // default open tab #
})

API

here is the example:

var collapse = new collapsejs()

// Call this for close all items
collapse.closeAll()

// Call this for open all items
collapse.openAll()

Browser compatibility

  • Newest two browser versions of Chrome, Firefox, Safari and Edge
  • IE 10 and IE 11

License

© 2018 Ahsan Abrar Released under the MIT LICENSE

Buy Me A Coffee

You can’t perform that action at this time.