Implementing a jQuery fallback for the details element

Question

I'm trying to implement a jQuery fallback for the details element. If you've never heard about it, it is basically a Disclosure widget. If the boolean attribute open is present, it indicates that both the summary and the additional information is to be shown to the user. If the attribute is absent, only the summary is to be shown. The following HTML and CSS achieve that.

HTML

<!-- opened -->
<details open>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

<!-- closed -->
<details>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

CSS

details summary ~ * {
    display: none;
}

details[open] summary ~ * {
    display: block;
}

I then added the following jQuery to add/remove the open attribute when the summary element is clicked.

jQuery

$("summary").click(function() {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
});

It adds and removes the open attribute, however the p element's visibility remains unaffected in Chrome. What am I doing wrong? Here is a live example.

Updates

• It works in Firefox 4.
• manjii pointed out that open should be changed to open="open" or it will not work the first time. BoltClock also provided an alternative solution. This is not the main issue though.
• marcosfromero and BoltClock brought up the issue of Chrome's dynamic styles support, which I think could be related.

Answer 1

It turned out to be a WebKit bug reported here.

Bug 21346 attribute value selector not being reevaluated upon attribute change

Adding this empty rule will temporarily fix the issue I was having:

details[open] {}

Contrary to the description in the bug report, it seems to occur when using an attribute selector followed by a descendant combinator.

However, Chrome 12 was released today and it has native support for the details and summary elements.

Answer 2

It's not working only the first time, because for:

<details open>

$(this).parent().attr("open") is equal to "" (empty string) = false => the attribute is not removed but given the value "open" => second time clicked will work.

To fix this, add a value to the attribute:

<details open="open">

Answer 3

Add Mozilla Firefox support

<details>
<summary>Summary</summary>
<p id="detail">Additional information</p>
</details>


<script>
var ischrome = false;
if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
    ischrome = true;
    }

$detail = $('#detail');
$detail.hide();
if(!ischrome){
    $('summary').prepend('► ');                     
}
$('summary').on('click', function(e){
    if ($detail.is(":visible")){
        $('summary').html('► summary');
        $detail.hide();                                 
    }else{              
        $('summary').html('▼ summary');             
        $detail.show(); 
    }
});                     
</script>