Implement jQuery backup for detail item

Question

I am trying to implement jQuery reserve for an element details. If you've never heard of this, this is basically a disclosure widget . If a logical attribute is present open, it indicates that the user will be shown both a summary and additional information. If the attribute is missing, only a summary will be displayed. The following HTML and CSS achieve this.

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;
}

Then I added the following jQuery to add / remove an attribute openwhen an element is clicked summary.

JQuery

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

It adds and removes the attribute open, however the visibility of the element premains unchanged in Chrome. What am I doing wrong? Here is a living example .

Update

• It works in Firefox 4.
• manjii , open open="open" . BoltClock . .
• marcosfromero BoltClock Chrome, , .

Answer 1

, WebKit ​​.

21346

, :

details[open] {}

, , , .

Chrome 12 details summary.

Answer 2

, :

<details open>

$(this).parent().attr("open") "" ( ) = false = > , "open" = > .

, :

<details open="open">

Answer 3

, Chrome jQuery, Chrome CSS.

jQuery, , CSS .

" ":

http://jsfiddle.net/marcosfromero/KQGn8/

Answer 4

In Safari, you will need to add evt.preventDefault () to the click handler, otherwise it will also trigger its own behavior, returning it to the state it was in before the click (this does not seem to happen in Chrome, strange).

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

Answer 5

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>