Lightweight Vanilla Javascript Collapse No Need any Dependency.
It's Easy as 123, No Dependency, No Conflicts
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;
}
<!-- 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'
})
<!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>
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 #
})
here is the example:
var collapse = new collapsejs()
// Call this for close all items
collapse.closeAll()
// Call this for open all items
collapse.openAll()
- Newest two browser versions of Chrome, Firefox, Safari and Edge
- IE 10 and IE 11
© 2018 Ahsan Abrar Released under the MIT LICENSE