Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

jquery-details

Worldโ€™s first <details>/<summary> polyfillโ„ข

Subscribe to updates I use jquery-details


Statistics on jquery-details

Number of watchers on Github 116
Number of open issues 15
Average time to close an issue 12 days
Main language JavaScript
Open pull requests 5+
Closed pull requests 3+
Last commit over 5 years ago
Repo Created over 8 years ago
Repo Last Updated about 2 years ago
Size 37 KB
Homepage https://mths.be/d...
Organization / Authormathiasbynens
Contributors1
Page Updated
Do you use jquery-details? Leave a review!
View open issues (15)
View jquery-details activity
View on github
Fresh, new opensource launches ๐Ÿš€๐Ÿš€๐Ÿš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating jquery-details for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

<details>/<summary> jQuery plugin

This plugin polyfills <details>/<summary> HTML elements and adds the appropriate ARIA annotations for optimal accessibility. More information can be found in my blog post on the subject.

Demo & Examples

http://mathiasbynens.be/demo/html5-details-jquery

Example Usage

In its simplest form:

// 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 <details>/<summary> are supported or not, use $.fn.details.support:

// Detect whether `<details>`/`<summary>` 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:

$('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 <details>.

Since both events live under the details namespace, you can easily unbind all handlers that are specific to this plugin:

$('details').off('.details');

Notes

The plugin doesnt require you to add any CSS to your document. It will add a class="open" to any open <details> 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.

This plugin automatically feature tests for native <details>/<summary> support and only enables the fallback when its necessary. You dont 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. For a version that works with jQuery 1.6 or older, see v0.0.1.

This fallback works in all A-grade browsers, including IE6. It will only be executed if the <details> element is not natively supported in the browser. If it isnt, and JavaScript is disabled, all elements will still be visible to the user.

While the plugin has a certain level of support for <details> elements without a <summary>, it should be noted that omitting the <summary> element results in invalid HTML, and prevents the custom open.details/close.details events from firing in browsers that natively support <details>. Dont do this!

License

This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.

_ Mathias_

jquery-details open issues Ask a question     (View All Issues)
  • over 5 years Unable to copy text wrapped in the summary
  • over 5 years Can this be animated?
  • over 5 years Set open attr, not just prop
  • about 6 years [enhancement] Add missing bower.json.
  • over 6 years Broken in jQuery 1.10.x
  • over 6 years Add to jsDeliver
  • almost 7 years Styles
  • over 7 years text inputs in summary are non-functional
  • about 8 years Allow toggling `open` state
  • over 8 years Donโ€™t auto-insert <summary> when there isnโ€™t one already
jquery-details open pull requests (View All Pulls)
  • Add package.json for npm
  • Do not trigger on summary > a, summary > button
  • Update jquery.details.js
  • Make sure click handler on summary element is only bound once.
  • Add Composer support
jquery-details questions on Stackoverflow (View All Questions)
  • jquery details tag alternative
jquery-details list of languages used
Other projects in JavaScript