Details/summary polyfill (expandable/collapsible content)
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
How to implement
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-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)
|
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.
|
Source code
- Date modified: