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
• Usage
• Options
• Methods
• License

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.