Milovan Zogovic

Simple HTML5 details polyfill

Although there are many HTML5 <details> polyfills already available, I didn’t like the complexity behind them. Here is how you can create your own from scratch in just few lines of css and js.

The idea was to put as much “logic” as possible in the stylesheet itself. It should hide/show the content based on the presence of open attribute. Here is the sass file:

.no-details details {
  > * {
    position: absolute;
    visibility: hidden;
  }

  > summary, &[open] > * {
    position: static;
    visibility: visible;
  }


  > summary {
    display: block;
    &:before {
      content: "►";
      padding-right: 5px;
      font-size: 11px;
    }
  }

  &[open] > summary:before {
    content:"▼"
  }
}

All children of details tag (except summary) will be by default hidden. If details element has open attribute set, its content will be shown. We could use css :not selector to simplify the css a whole lot, but it is only supported by IE9+, and I’d like polyfill to target IE8+.

And here is the coffeescript:

jQuery ->
  return if Modernizr.details

  $(document).on 'click', 'summary', (event) ->
    $summary = $(this)
    $details = $summary.parent()

    if $details.attr('open')
      $details.removeAttr('open')
    else
      $details.attr('open', 'open')

It simply toggles the open attribute when user clicks on summary. Its as simple as that.