1.0.2 • Published 3 years ago
expander.js v1.0.2
expander.js
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.
Contents
Features
Install
npm install expander.js
Usage
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>2. Initialize your class
<script src="expander.js/dist/expander.js"></script>
<script>
let expander = new Expander('.cs-expander-items',{toggle:true,resetable:true})
</script>Options
| 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 |
Methods
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
}collapse
Resets expander
expander.collapse();increaseItem, decreaseItem
Increase or decrease items by number or default.
expander.increaseItem();
expander.increaseItem(5);
expander.decreaseItem();
expander.decreaseItem(5);getActiveItems
Get all shown elements as an node array
expander.getActiveItems();getHiddenItems
Get all hidden elements as an node array
expander.getHiddenItems();License
This project is available under the MIT license.