Dontcom

HTML5 Detail

The details and the summary elements are new. And they’re awesome. I’m jotting this down so I can remember (and also you can help me with the jQuery, cos it’s buggy.) I’ve written a bit of HTML/CSS and jQuery which allows for show/hide behaviour the the above mentioned elements. The details element has one attribute: open. Consider the following HTML and CSS:

<details>
  <summary>Info</summary>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.</p>
  </div>
</details>

<style>
details :nth-child(2) {
  display: none;
}

details[open] :nth-child(2) {
  display: block;
}
</style>

And here’s my jQuery that needs help.

(function ($) {
  $.fn.detailToggle = function() {
    this.each( function() {
      $(this).bind('click', function() {
        if ( $(this).parent().attr("open") ) {
          $(this).parent().removeAttr("open");
        } else {
          $(this).parent().attr("open","open");
        }
      });
    });
  };
})(jQuery);

I would have thought that plugin along with the CSS above would have done the trick…but it only works in Firefox… Can anyone give me some ideas?