This package makes your HTML elements increase and decrease in an animated way. The best features are toggle elements, increase element, decrease element and reset elements.
This package is still in development. I welcome suggestions for changes that will bring it closer to compliance without overly complicating the code, or useful test cases to add to the test suite.
| Features |
|---|
| Collapse All |
| Toggle Items |
| Increase Item |
| Decrease Item |
npm install expander.js
1. Add markup (your wrapper has to be relative position
and add hidden style as display none)
<style>
.hidden
{
display: none;
}
.cs-expander-items
{
position: relative;
}
</style>
<div class="cs-expander">
<div class="cs-expander-items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div><script src="expander.js/dist/expander.js"></script>
<script>
let expander = new Expander('.cs-expander-items',{toggle:true,resetable:true})
</script>| Option | Type | Description |
|---|---|---|
show |
Number | Default: 4. Number of items initially shown. |
increase |
Number | Default: 3. Number of items to add per click. |
decrease |
Number | Default: 3. Number of items to remove per click, if it is zero it will use increase variable. |
toggle |
Boolean | Default: false. Append a toggle button, and functionality. |
resetable |
Boolean | Default: false. Append a reset button, and functionality. |
unary |
Boolean | Default: false. Removes increase and decrease buttons if toggle is true |
increaseBtn |
String | Default: '.cs-expander-increase-btn'. Button container for increasing items |
increaseBtnValue |
String | Default: 'Increase Items'. Increase button text |
toggleBtn |
String | Default: '.cs-expander-toggle-btn'. Button container for toggling |
toggleBtnValue |
String | Default: 'Toggle Items'. Toggle button text |
decreaseBtn |
String | Default: '.cs-expander-decrease-btn'. Button container for decreasing items |
decreaseBtnValue |
String | Default: 'Decrease Items'. Decrease button text |
resetBtn |
String | Default: '.cs-expander-reset-btn'. Button container for reset expander |
resetBtnValue |
String | Default: 'Collapse'. Reset button text |
animationDuration |
Number | Default: 1. Animation Duration |
The slider returns a slider object with some properties and methods once it's initialized:
{
collapse: collapse(),
increaseItem: increaseItem(),
decreaseItem: decreaseItem(),
getActiveItems: getActiveItems, // Array
getHiddenItems: getHiddenItems, // Array
}Resets expander
expander.collapse();Increase or decrease items by number or default.
expander.increaseItem();
expander.increaseItem(5);
expander.decreaseItem();
expander.decreaseItem(5);Get all shown elements as an node array
expander.getActiveItems();getHiddenItems
Get all hidden elements as an node array
expander.getHiddenItems();This project is available under the MIT license.