var summaryClick = function(elem){ if (!('open' in document.createElement('details'))){ var deetails = elem.parentNode; if(deetails.hasAttribute('open')){ deetails.removeAttribute('open'); } else { deetails.setAttribute('open', 'open') } } }
add the summaryClick to your <summary> click event listeners
And then in my CSS I put something similar to:
details:not([open]) { height: 2em; overflow: hidden; } details[open] { height: auto; } summary::before { content: "▶ "; }
Only browsers that understand the JS used will understand the selectors used. So, this isn’t fool proof, but it’s nice, quick and dirty.