Expand & Collapse HTML Content On Click - jQuery toggleOnClick
File Size: | 4.76 KB |
---|---|
Views Total: | 896 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

toggleOnClick is a tiny jQuery plugin for expanding & collapsing HTML content by clicking on a trigger element.
Can be helpful in creating popovers, dropdown menus, spoilers, and much more.
How to use it:
1. Import the toggleOnClick jQuery plugin as a module.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to//index.js" type="module"></script>
// OR import toggleOnClick from './index.js';
2. Create your content to be expanded and collapsed.
<div class="menu" id="js-menu"> Menu or something else... </div>
3. Create a trigger element to toggle the content.
<button id="js-button"> Click To Toggle </button>
4. Enable the trigger button to toggle the content and apply custom animations to open/close states as follows:
$(function() { toggleOnClick( $('#js-button'), $('#js-menu'), { open($element) { $element.slideDown(200); }, close($element) { $element.slideUp(200); } } ); });
This awesome jQuery plugin is developed by mavlutovr. For more Advanced Usages, please check the demo page or visit the official website.