6

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!

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

1 Answers1

2

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.

Community
  • 1
  • 1
JNF
  • 3,696
  • 3
  • 31
  • 64
  • I also thought that, but it's not the key reason because using prop is not adding prop open="open" but using attr add attribute open="open" (inspect it) – Bhojendra Rauniyar Dec 15 '14 at 09:05
  • @Bhojendra-C-LinkNepal, not sure I got your point. `prop` adds a property, `attr` adds an attribute. – JNF Dec 15 '14 at 09:12