0.1.6 • Published 5 years ago
collapsejs v0.1.6
CollapseJs
Lightweight Vanilla Javascript Collapse No Need any Dependency.
It's Easy as 123, No Dependency, No Conflicts
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