A pure JS polyfill for <details> tag with DOM API for all browsers including IE6+
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
__COMPILE
__SRC
example
.gitignore
README.md

README.md

A pure JS polyfill for details tag with DOM API for all browsers including IE6+

Status: Beta 2

Demo: http://jsbin.com/eyopiy/5

Using

<!--[if lt IE 8]>
<script src=Element.details.ielt8.js"></script>
<![endif]-->
<!--[if IE 8]>
<script src="Element.details.ie8.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="Element.details.js"></script>
<!--<![endif]-->

DOM API

var details = document.querySelector("details");
details.open = true;
details.open = false;

CSS selector for 'details marker'

detail .details-marker { <some> }
[or] detail>*>.details-marker { <some> }

summary::-webkit-details-marker { <some> }
summary::-moz-details-marker { <some> }
summary::-o-details-marker { <some> }
summary::details-marker { <some> }

##Use with dynamic HTML DOM API:

Array.from(document.querySelectorAll('details')).forEach(function(el){
	el.open = el.open
})

jQuery:

$("details").each(function(k, el) {
	el.open = el.open;
})

##Features

  • DOM API (Extend Node.prototype with "open" property)
  • No libs need (almost)
  • Create element (instead of fake which can be styled in css) when
    without
  • Wrap text nodes into custom element instead of (which can be styled in css)
  • IE6 and IE7 support with some tweaks

##Limitations

  1. Require:
  2. No animation support for now

Browser support

  • All browsers including IE8
  • IE7,IE6 only support with Element.details.ielt8.htc file in the root of youre site

IE < 8

  • Problem: Property open has the same name as Attribute open -> rename attribute to "$OPEN$"

TODO

  1. Listeners (open/close)