❤
npm
Sign UpSign In

collapsejs

0.1.6 • Public • Published

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 collapse({
  container: '.collapse-1'
})
 
new collapse({
  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 collapse({
    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 collapse()
 
// 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

Readme

Keywords

Package Sidebar

Install

npm i collapsejs

Repository

github.com/AhsanAbrar/collapsejs

Homepage

github.com/AhsanAbrar/collapsejs#readme

Weekly Downloads

16

Version

0.1.6

License

MIT

Unpacked Size

23.7 kB

Total Files

14

Last publish

Collaborators

  • ahsanabrar
Try on RunKit
Report malware