6

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.
Community
  • 1
  • 1
melhosseiny
  • 9,992
  • 6
  • 31
  • 48

6 Answers6

2

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.

melhosseiny
  • 9,992
  • 6
  • 31
  • 48
1

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>
Jessé Catrinck
  • 2,227
  • 19
  • 20
1

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">
manji
  • 47,442
  • 5
  • 96
  • 103
0

In Safari you will need to add evt.preventDefault() to the click handler, otherwise it will also trigger the native behaviour, returning it to the state it was at before the click (this doesn't seem to happen in Chrome, oddly).

$("summary").click(function(evt) {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
    evt.preventDefault();
});
darsh
  • 226
  • 2
  • 4
0

I use this solution to get it to work on all non-supported browsers. It does not require nor use jQuery, but you can enhance it with jQuery if you like (it is just plain JS).

Here is the solution in action:

details summary {display: block;}    
details summary ~ * {
    display: none;
}
details[open] summary ~ * {
    display: block;
}
<details>
  <summary onclick="if(this.parentElement.getAttribute('open')!='open') this.parentElement.setAttribute('open','open'); else this.parentElement.removeAttribute ('open'); return false;">{{ item.title }}</summary>
  {{ item.content }}
</details>
Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • I am pretty sure SO has a policy against duplicate answers. Why would an answer in a very similar tread go offline? I think this policy only applies to (and is designed for) links to a third party, but I may be wrong. – Mr. Hugo Oct 02 '18 at 14:43
  • UPDATE: I have added the solution to the answer. – Mr. Hugo Oct 02 '18 at 15:19
0

At least in Chrome, the problem is not with the jQuery code but with Chrome support for your CSS selectors.

If you debug the jQuery code, it works, but CSS is not applied as intended.

Check this fork of your original code with a "debug console":

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

marcosfromero
  • 2,853
  • 17
  • 17
  • I know that it adds and removes the `open` attribute correctly, but the CSS is _initially_ applied as intended as you can see. The first `details` element is opened, while the second one is closed. – melhosseiny Jun 07 '11 at 02:00
  • WebKit seems to have issues with `~` and dynamic styles. – BoltClock Jun 07 '11 at 02:01
  • @BoltClock `~` is not the problem, because if you replace it with `+` it still does not work. – melhosseiny Jun 07 '11 at 02:05