For example:

<details class="faq__accordion-button"> <summary>Donec ac odio tempor orci. Sed sed risus pretium quam celeri?</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit. Gravida neque convallis a cras semper. Dolor magna eget est lorem ipsum. Pellentesque adipiscing commodo elit at imperdiet dui. Ut tortor pretium viverra suspendisse.</p> <a href="#">Sample Link</a> </details> is valid and triggers fine in IE11, but
<details class="faq__accordion-button"> <summary><span></span>Donec ac odio tempor orci. Sed sed risus pretium quam celeri?</span></summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna eget est lorem ipsum dolor sit. Gravida neque convallis a cras semper. Dolor magna eget est lorem ipsum. Pellentesque adipiscing commodo elit at imperdiet dui. Ut tortor pretium viverra suspendisse.</p> <a href="#">Sample Link</a> </details> will not

See other polyfills for details/summary for more information on accessibility here. A lengthy explanation can be found at https://www.smashingmagazine.com/2014/11/complete-polyfill-html5-details-element/ although it's out of date as to which browsers support details/summary.

This project is great - have had some users on IE or pre-Chromium-Edge that have benefitted from this. One thing that is not perfect that I thought you might like to know about is that it would be better to have a new line inserted when the <detail> tag is opened. Currently in IE, the content of the <detail> tag is on the same line as the opened tag. When you have nested tags this looks a bit odd.

I have tried changing the inserted style from display:inline-block to display:block, which fixes the newline problem but then the arrow is not on the same line as the rest of the <detail> tag so it's better in one way and worse in another. It could be because IE is not good at display:inline-block, but I thought you'd like to know anyway, in case you can make it better.

The native <details> element triggers a toggle action whenever it is toggled.

Something like the following might work:

function clickHandler (e) {
  if (e.target.nodeName.toLowerCase() === 'summary') {
    var details = e.target.parentNode
    if (!details) return

    var shouldContinue = dispatchToggleEvent(details);
    if (!shouldContinue) return

    if (details.getAttribute('open')) {
      details.open = false
      details.removeAttribute('open')
    } else {
      details.open = true
      details.setAttribute('open', 'open')
    }
  }
}

function dispatchToggleEvent (details) {
  var toggleEvent;
  try {
    toggleEvent = new CustomEvent('toggle', { bubbles: true, canceable: true });
  } catch(e) {
    toggleEvent = document.createEvent('CustomEvent');
    toggleEvent.initCustomEvent('toggle', true, true, null);
  }

  return details.dispatchEvent(toggleEvent);
}

I don't have access to enough browsers to test this thoroughly, though.

I'd like to add a test suite to this via travis/browserstack. It seems like you're too busy for this project, so I'd like to step in.

Hi!
I would like to know if this project works with react, thanks!!

Hi there. Thanks for creating this polyfill. Just the kind of minimalist implementation I was looking for.

However, I'm having a problem with it under Firefox in Linux. The triangle arrows show up as gibberish. I was able to fix it by changing these lines:

'html.no-details ' + DETAILS + ' > ' + SUMMARY + ':before { content: "▶"; display: inline-block; font-size: .8em; width: 1.5em; }\n' +
'html.no-details ' + DETAILS + '[open] > ' + SUMMARY + ':before { content: "▼"; }')

to this:

'html.no-details ' + DETAILS + ' > ' + SUMMARY + ':before { content: "\u25b6"; display: inline-block; font-size: .8em; width: 1.5em; }\n' +
'html.no-details ' + DETAILS + '[open] > ' + SUMMARY + ':before { content: "\u25bc"; }')

Works great for me in Chrome as well. Not sure how it looks in IE/Edge.

It appears that the polyfill doesn't provide any keyboard accessibility to toggle the details element. I tried adding tabindex=0 to the <summary> element, which makes it focusable but not toggleable.

Both Chrome and Firefox allow the user to focus on the <summary> element and toggle the details using the Space or Enter keys.

It is probably not too difficult to implement, if I do get something working I will send over a pull request

TypeError: null is not an object (evaluating 'document.body.appendChild')

because document.body is currently null due to document.readyState === "loading".

In the README and package.json it says MIT but it would be nice to have a LICENSE or LICENSE.md file so that it is detected by GitHub automatically (see https://help.github.com/articles/adding-a-license-to-a-repository/)

Also I wanted to say thanks for creating this polyfill! <details> is still "under consideration" in Edge so it's really useful regardless of whether IE support is necessary.

Due to the <details> element not being block-level by default.

Edit: Should this be handled by this library, or by the project? We already have to do such with <article>. Would people think to do the same with <details> and <summary>? I hadn't.