HTML Buddies: <details> & <summary>

These styles are not be beautiful because I made none. I did, however, take the time to do some digging to make sure your implementation is accessible. Then you can apply your techniques following best practices of making hover and focus styles, ensuring good contrast, and making sure you are not relying on color changes or visual cues alone.

There is a polyfill…

Edge does not yet support <details> & <summary>, but with this polyfill you can make Edge play along like the rest. The polyfill is embedded in this pen as well.

Note that in all browsers that support <details> & <summary>, holding down the Enter key makes it toggle repeatedly, but not with the Space bar . The polyfill lets it toggle repeatedly with Space in Edge.

…or you can detect support

Modernizr provides a configuration option to detect whether a browser supports <details> & <summary>. Maybe do not use it if you are using the polyfill.

References