Details and summary tag compatibility issues

Question

How do you get the details and summary tag for HTML5 to work on all browsers? I can get the details and summary tag to work with google chrome but i can't get it to work with any other browser.

Answer 1

This is an old question, but there is still limited browser support for the details and summary tags. One blog post that I found to be useful was this: http://blog.teamtreehouse.com/use-details-summary-elements. It uses jquery for backward compatibility.

Answer 2

I use this to get it to work on all non-supporting browsers:

if(this.parentElement.getAttribute('open')!='open') 
  this.parentElement.setAttribute('open','open'); 
else this.parentElement.removeAttribute ('open'); 
return false;

details summary {display: block;}
details summary::before {content: "▸ ";}
details[open="open"] summary::before {content: "▾ ";}
details summary ~ * {
    display: none;
}
details[open] summary ~ * {
    display: block;
}

<details>
  <summary onclick="if(this.parentElement.getAttribute('open')!='open') this.parentElement.setAttribute('open','open'); else this.parentElement.removeAttribute ('open'); return false;">{{ item.title }}</summary>
  {{ item.content }}
</details>

Note that Firefox sets an empty 'open' attribute. You want to normalize that by setting this with javascript to 'open'.

No JS? No problem, you will have the default behaviour. JS will just try to take over the browsers implementation and set or remove the attribute. CSS will take over the showing and hiding (based on the 'open' attribute). The CSS rule perfectly emulates the normal and behaviour, and therefore does not influence/change or break it. Because the detail/summary implementation is now fully JS and CSS backed, it will also work on all non-supporting browsers.