Author: | meneerrook |
---|---|
Views Total: | 465 views |
Official Page: | Go to website |
Last Update: | December 9, 2019 |
License: | MIT |
Preview:

Description:
collapseAbleItems.js is a JavaScript plugin that cuts off your long list to a specified number of items and allows a toggle link to smoothly show/hide the truncated list items.
How to use it:
1. Start with loading the collapseAbleItems.js library into the document.
<script src="collapseableItems.min.js"></script>
2. Wrap your long list together with a toggle element into a container element.
- data-amount: the maximum number of visible items
- data-expanded: whether to expand all items on init
- data-more: expand text
- data-less: collapse text
<div class="group" data-collapsed-amount="3" data-expanded="true"> <ul class="list"> <li class="item"><a class="anchor" href="#">Blouses</a></li> <li class="item"><a class="anchor" href="#">Shirts</a></li> <li class="item"><a class="anchor" href="#">Suits</a></li> <li class="item"><a class="anchor" href="#">Pants</a></li> <li class="item"><a class="anchor" href="#">Jackets</a></li> <li class="item"><a class="anchor" href="#">Sweaters</a></li> <li class="item"><a class="anchor" href="#">Jerseys</a></li> <li class="item"><a class="anchor" href="#">Shoes</a></li> <li class="item"><a class="anchor" href="#">Accessories</a></li> </ul> <a href="#" class="toggler" data-more="Show more" data-less="Show less"></a> </div>
3. Initialize the library and done.
let options = { amountFromDOM: true, expandedOnLoadFromDOM: true }; let setCollapseItems = new CollapseableItems(options); setCollapseItems.init();
4. You can also specify the max number of visible items in the JavaScript during init.
let options = { amount: 5 };
5. All default options to config the library.
let options = { // the maximum number of visible items amount: 5, // set the amount option using data attribute amountFromDOM: false, amountAttribute: 'data-amount', // expanded on page load expandedOnLoad: false, // set the expanded option using data attribute expandedOnLoadFromDOM: false, expandedOnLoadAttribute: 'data-expanded', // group selector group: { selector: '.group', expandedClass: 'expanded' }, // list selector list: { selector: '.list' }, // item selector item: { selector: '.item' }, // toggler options toggler: { selector: '.toggler', create: false, attributes: { 'href': '#', 'data-more': 'Show more', 'data-less': 'Show less', 'class': 'toggle-items' } } };