jQuery Accordion Collapsible Panel
Last Updated: 2020-07-15 23:07:39
This is a lightweight collapsible panel plugin that can be used for secondary menus, multi-item content blocks, and other scenarios. It is also very easy to use.
HTML Header Section:
1 2 3 4 5 | <!-- css --><link rel="stylesheet" href="css/main.css"><!-- js --><script src="js/jquery-3.4.1.min.js"></script><script src="js/myFoldpanel.js"></script> |
Body Section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <dl class="foldpanel" id="my-foldpanel"> <dt>Languages</dt> <dd> <div>Java</div> <div>javascript</div> <div>python</div> </dd> <dt>Sports</dt> <dd> <div>Football</div> <div>Badminton</div> <div>Basketball</div> </dd> <dt>Musical Instruments</dt> <dd> <div>Piano</div> <div>Accordion</div> </dd></dl> |
Then call the plugin before the <body></body> closing tag:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> $(function() { $('dl#my-foldpanel').foldpanel({ init:false, // Whether to enable initialization. Disabled by default. init_index: 0, // The specified number represents the index of the initially expanded panel. 0 means the first panel. Only takes effect when init:true. time: 400, // Panel expansion animation duration. Defaults to 100ms. dbclose: false // Whether clicking the current panel closes it. Defaults to true. });})</script> |
This plugin is modified from the collapsible panel created by Arron_yr. The original version had some bugs, which I attempted to fix.
Original Plugin URL:
Improvements:
1. Fixed a brief horizontal shift on the left side during initial loading.
2. Added configuration for the initial expanded panel, instead of only allowing the first panel to be expanded by default.
3. Fixed an issue where panels sometimes failed to open after multiple clicks.
(Cause of the bug: data.flag was not set to false when hide was called.)