jQuery `prop` not working in FireFox on the `open` property of details

Question

I want to fix the detail-html-element behaviour in Firefox.

So I toggle the open attribute myself like:

$('summary').on('click', function () {
    var details = $(this).parent();  
    $('details').prop('open', !details.attr('open'));
});

DEMO

I use prop because open is a property and not an attribute, right ?!

Anyway, this doesn't work in Firefox, but if I change prop to attr it works

$('details').attr('open', !details.attr('open'));  

Can someone explain to me where I go wrong ? Thnx!

Answer 1

The css you are using identifies an attribute. That's why changing the attribute gets the css change and setting the property doesn't.

I use prop because open is a property and not an attribute, right ?!

Well, it can be either, depending on how you define it. The css, again, refers to the attribute.

There are several long answers explaining the differences and where to use each.

In a nutshell

An attribute is a setting on the HTML element which attributes certain data or behaviors to the element. It's relevant mainly on load, helping us render the HTML correctly, hearing this is probably what made you use prop.

A property is a characteristic of the DOM node, telling us it's current state-of-foo. There are specific properties attached to specific node types, some by standard, some by browser design. As it's part of DOM, the property stays with us along DOM manipulation, AKA Javascript.