Details/summary polyfill (expandable/collapsible content)

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

The HTML5 details and summary elements allows content to be expanded and collapsed. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.

Working example

To use the polyfill, standard details and summary elements must be used. In cases where a browser doesn't support these elements, the polyfill is automatically loaded.

Configuration options

Configuration options available for the details and summary elements (HTML5 specification)

Events

Event Trigger What it does
wb-init.wb-details Triggered manually (e.g., $elm.trigger( "wb-init.wb.wb-details" );). Used to manually initialize the details/summary polyfill on a summary element. Note: The details/summary polyfill will be initialized automatically unless the summary element is added after the page has already loaded.
wb-init.wb-details Triggered manually (e.g., $( "summary" ).trigger( "wb-init.wb-details" );). Used to manually initialize the details/summary polyfill on a summary element. Note: The details/summary polyfill will be initialized automatically unless the summary is added after the page has already loaded.
wb-ready.wb-details (v4.0.5+) Triggered automatically after the details/summary polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native details/summary support. Used to identify where the details/summary polyfill initialized (target of the event) 
$( document ).on( "wb-ready.wb-details", "summary", function( event ) {
});
$( "summary" ).on( "wb-ready.wb-details", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Details/summary polyfill source code on GitHub

Date modified: