https://github.com/mathiasbynens/jquery-details
World’s first <details>/<summary> polyfill™
https://github.com/mathiasbynens/jquery-details
Last synced: 2 months ago
JSON representation
World’s first <details>/<summary> polyfill™
- Host: GitHub
- URL: https://github.com/mathiasbynens/jquery-details
- Owner: mathiasbynens
- License: gpl-2.0
- Created: 2011-12-31T16:16:30.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2020-07-18T01:16:01.000Z (almost 5 years ago)
- Last Synced: 2025-03-27T22:17:44.005Z (3 months ago)
- Language: HTML
- Homepage: https://mths.be/details
- Size: 36.1 KB
- Stars: 121
- Watchers: 10
- Forks: 34
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE-GPL.txt
Awesome Lists containing this project
README
# ``/`` jQuery plugin
This plugin polyfills ``/`` HTML elements and adds [the appropriate ARIA annotations](http://mathiasbynens.be/notes/html5-details-jquery#comment-58) for optimal accessibility. [More information can be found in my blog post on the subject.](http://mathiasbynens.be/notes/html5-details-jquery)
## Demo & Examples
## Example Usage
In its simplest form:
```js
// Polyfill a given set of elements
$('details').details();
```
The plugin will automatically detect browser support and act accordingly. If other parts of your code need to know whether ``/`` are supported or not, use `$.fn.details.support`:
```js
// Detect whether ``/`` are natively supported
console.log($.fn.details.support ? 'Native support' : 'No native support');
// Conditionally add a classname to the `html` element, based on native support
$('html').addClass($.fn.details.support ? 'details' : 'no-details');
```
The plugin will provide `open.details` and `close.details` events for you to use:
```js
$('details').on({
'open.details': function() {
console.log('opened');
},
'close.details': function() {
console.log('closed');
}
});
```
Any handlers bound to these events will fire even in browsers that natively support ``.
Since both events live under the `details` namespace, you can easily unbind all handlers that are specific to this plugin:
```js
$('details').off('.details');
```
## Notes
The plugin doesn’t require you to add any CSS to your document. It will add a `class="open"` to any open `` elements though (in addition to the `open` attribute), so you can very easily target these using CSS if you want.
This plugin includes my [noSelect jQuery plugin](http://mths.be/noselect).
This plugin automatically feature tests for native ``/`` support and only enables the fallback when it’s necessary. You don’t have to write any feature tests yourself.
This plugin requires jQuery 1.9+. For a version that works with jQuery 1.8 or older, [see v0.0.6](https://github.com/mathiasbynens/jquery-details/blob/0.0.6/jquery.details.js). For a version that works with jQuery 1.6 or older, [see v0.0.1](https://github.com/mathiasbynens/jquery-details/blob/0.0.1/jquery.details.js).
This fallback works in all A-grade browsers, including IE6. It will only be executed if the `` element is not natively supported in the browser. If it isn’t, and JavaScript is disabled, all elements will still be visible to the user.
While the plugin has a certain level of support for `` elements without a ``, it should be noted that omitting the `` element results in invalid HTML, and prevents the custom `open.details`/`close.details` events from firing in browsers that natively support ``. Don’t do this!
## License
This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.
_– [Mathias](http://mathiasbynens.be/)_