Wednesday, March 27, 2024
HomejQueryAccessible Content material Toggle Plugin - jQuery Toggle-Panel

Accessible Content material Toggle Plugin – jQuery Toggle-Panel


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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments