collapsejs

v0.1.6

Published

4 years ago

Lightweight Vanilla Javascript Collapse No Need any Dependency.

Downloads

0High
0Medium
0Low

ahsanabrar

es6 js collapse

CollapseJs

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme