This time I will share jQuery Plugin and tutorial about Flexible Content Expanding and Collapsing Plugin – jQuery Collapse, hope it will help you in programming stack.
Collapse is a simple, lightweight and flexible jQuery Plugin that allows you to expand or collapse content to save space and reduce the load time.
Features:
- Accordion Behaviour Supported.
- Works with CSS3 Animations.
- Remembers the toggle state on page reload using local storage or cookies.
- Compatible with all major browsers.
Basic Usage:
1. Include jQuery and jQuery Collapse in your page.
2 |
<script src="jquery.min.js"></script> |
4 |
<script src="src/jquery.collapse.js"></script> |
6 |
<script src="src/jquery.collapse_cookie_storage.js"></script> |
8 |
<script src="src/jquery.collapse_storage.js"></script> |
2. Create trigger elements and toggleable content into a container with the data-collapse attribute. That’s it.
01 |
<div id="demo" data-collapse> |
10 |
<p>You can use any container you like (in this case a div element)</p> |
3. Enable the Accordion mode.
1 |
<div id="demo" data-collapse="accordion"> |
4. Persist the toggle state.
1 |
<div id="demo" data-collapse="persist"> |
5. You can also initialize the plugin via JavaScript as follows:
6. Callback functions which will be fired on open/close.
Changelog:
2020-02-04
This awesome jQuery plugin is developed by danielstocks. For more Advanced Usages, please check the demo page or visit the official website.
