Toggle-Panel is a light-weight jQuery plugin that gives a sublime approach to create accessible and mobile-friendly toggleable content material (like spoilers and accordions) on the web page, with assist for ARIA attributes, roles, and keyboard interactions.
Extra Options:
- Customized toggle mode: Slide, Toggle, or a operate.
- Auto closes all panels on cell gadgets.
- Auto set give attention to the opened panel.
- Customized set off occasions: click on or mouseover.
- Customized ARIA labels.
Learn how to use it:
1. Allow a button to point out/cover a DIV aspect.
<button sort="button" id="trigger-example">Toggle Panel-Instance</button> <div id="panel-example" class="panel"> Content material To Toggle </div>
2. Cover the DIV aspect on web page load.
.panel { show: none; } .tgp__panel--is-opened { show: block !essential; }
3. Decide whether or not to open the DIV panel on web page load.
<button sort="button" data-tgp-panel-id="trigger-example" data-tgp-opened="true">Toggle Panel-Instance</button> <div id="panel-example" class="panel"> Content material To Toggle </div>
4. Load the Toggle-Panel plugin after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.toggle-panel.js"></script>
5. Initialize the plugin and completed.
$('#trigger-example').togglePanel({ // choices right here });
6. Use this plugin to create an accessible accordion interface.
<div id="wrapper"> <div> <button sort="button" id="trigger-1">Toggle Panel 1</button> <div id="panel-1" class="panel"> Accordion 1 </div> </div> <div> <button sort="button" id="trigger-2">Toggle Panel 2</button> <div id="panel-2" class="panel"> Accordion 2 </div> </div> <div> <button sort="button" id="trigger-3">Toggle Panel 3</button> <div id="panel-3" class="panel"> Accordion 1 </div> </div> </div>
$('button').togglePanel({ panel: 'subsequent', mode: 'toggle', wrapper: $('#wrapper'), join: true, });
7. All default plugin choices.
$('#trigger-example').togglePanel({ // CSS class prefix prefix : 'tgp', // wrapper of linked panels wrapper: false, // if true, just one panel might be opened join: false, // subsequent panel or an distinctive panel ID panel: 'subsequent', // set off occasion: 'click on' or 'mouseover' occasion: 'click on', // If 'panel' setting = "operate", this operate might be known as findPanel: operate() {}, // 'slide', 'toggle', or 'customized' mode: 'slide', // auto transfer focus to the opened panel autoFocus: true, // enable the set off button to shut its panel selfClose: true, // return focus to the set off after closing returnFocus: true, // shut panel after mouse leaving with delay autoHide: false, // delay in ms delay: 300, // disable clicks on the primary ranges disableFirstLevel: false, // take away titles from set off buttons removeTitle: false, // shut all panels on cell gadgets smallScreenBreakpoint: 767, // labels for accessibility panelLabel: '', closeLabel: 'Collapse', openLabel: 'Broaden', // If 'mode' setting = 'customized', these features might be known as customShow: operate() {}, customHide: operate() {}, });
8. Callbacks.
$('#trigger-example').togglePanel({ onShow: operate () {}, onShowEnd: operate () {}, onHide: operate () {}, onHideEnd: operate () {} });
9. API strategies.
// take away auto give attention to init $('button[id^=trigger]').set off('no-autofocus.tgp'); // present panel $('button[id^=trigger]').set off('present.tgp'); // cover panel $('button[id^=trigger]').set off('cover.tgp'); // destroy $('button[id^=trigger]').set off('destroy.tgp');
This superior jQuery plugin is developed by cyril-lamotte. For extra Superior Usages, please verify the demo web page or go to the official web site.