Standardista

CSS3, JavaScript and HTML5 explained

details and summary polyfill

Posted By on August 3, 2012 

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.

Category: css3, HTML5, javascript, Web Development
Tags:


About The Author

My name is Estelle Weyl. I am a consulting web developer, write for Community MX, speak about web development on occasion, and have a full time job as Senior Web Developer for a small startup. I’ve been coding CSS, XHTML, JavaScript and PHP since 1999, tableless CSS since 2003. If you have any recommendations on topics for me to hit, please let me know via comments.

Comments