JQuery `prop` does not work in FireFox on the` open` property of parts

Question

I want to fix the behavior of detail-html elements in Firefox.

So, I switch the open attribute as:

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

Demo

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

In any case, this does not 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'm wrong? Thnx!

Answer 1

The css you use defines the attribute. This is why changing an attribute gets a css change and setting the property does not.

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

Well, it can be either depending on how you define it. Css, again, refers to an attribute.

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

In a nutshell

Attribute is a parameter in an HTML element that binds certain data or behavior to the element. This is mainly due to the load, helping us render HTML correctly, listening that it probably made you use prop .

A property is a characteristic of the DOM node, telling us about the current state of foo. There are special properties associated with certain types of node, some according to the standard, some according to the design of the browser. As part of the DOM, the property remains with us through the DOM manipulation, AKA Javascript.