Hectix's Collapse

Hectix's Collapse is a lightweight, jQuery dependent plugin for customizable collapses. You can see demo and dig deep into it at plugin GitHub Page.

How to use it?

You can install hectixCollapse using package managers or download it directly.

npm

npm install hectixcollapse

or

bower

bower install hectixcollapse

###Use it!

include jQuery and hectixCollapse script right before end of body tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/hectixcollapse.min.js"></script>

HTML Structure

<section class="hectixCollapse cs-hidden">
    <div class="collapse-item">
        <h1>First collapse item</h1>
        <p>This is first collapse item</p>
    </div>
    <div class="collapse-item">
        <h1>Second collapse item</h1>
        <p>This is second collapse item</p>
    </div>
    ...
    <a class="collapse-button"><span class="button-text"></span><span class="counter"></span></a>
</section>

Use class .cs-hidden to prevent displaying collapse before execution.
Section tag is for demonstrational purposes only, you can use div instead!

Call hectixCollapse

$("section.hectixCollapse").hectixCollapse({
    initialItems: 1,
    itemPerClick: 2,
    slideSpeed: 600,
    buttonText: "Next",
    showCounter: false
});

Settings

| Name | Expected | Default | Description | | ------------- |:-------------:| -----:| -----:| | initialItems | number | 1 | Numbers of elements shown on start of plugin | | itemsPerClick | number | 1 | Items slided per click on button | | slideSpeed | number | 300 | Speed of slide animation | | showCounter | boolean | false | Show counter in a collapse button | | buttonText | string | "next" | Text displayed in a collapse button |

Hectix's Collapse is maintained by Dávid Ďurčo.
Think you found a bug or you have improvement idea? Use github issue tracker.

MIT © Dávid Ďurčo