Best .js polyfill to get <details> tag working with all browsers

Question

I would like to have expanding paragraphs aka the HTML5 tag. However, most browsers do not support this yet so we would need a javascript fallback of some sort. The question is how best to do this.

It seems there are JQuery solutions to this but my initial thoughts are that this is a large overhead to solve a small problem. However, in reality, it may be that most browsers would already have the jquery library cached in which case it is no overhead at all. I guess that would only work if we linked to an external jquery CDN, not a locally served one.

Alternatively, there are smaller javascript solutions but they would not already be cached by the local browser.

And what about Modernizr is that common enough that it would likely already be cached?

Answer 1

There are a couple of people online who have solved it using a bit of CSS and regular JS (no JQuery necessary).

Dudley Story wrote a nice article on what goes into creating it for each of the browsers, as well as a codepen demo with reusable code. This seems to be the cleanest implementation I've found so far.