Expand/Collapse Items In A Long List – collapseAbleItems.js

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'
      }
    }
    
};