3 ms·

You can't actually control the open state properly from markup (the `open` attribute only sets the default state), which is why I haven't bothered with them.

eleventen 10mo ago
Out of curiosity, why have you needed to? This has never come up for me.
- crooked-v 10mo ago
  For a simple example, imagine buttons that opens a modal with a particular arrangement of open/closed accordions for each button.
  - sfn42 10mo ago
    You can do that with a details element, you just need some code to actually do it. Which I'm pretty sure there's no possible solution that doesn't require some code to do that. Really don't see what your complaint is.
bikeshaving 10mo ago
I’m not sure this is correct. The DOM class HTMLDetailsElement has the `open` property, which you can use to read/write the details element’s state. If you’re using setAttribute/getAttribute just switch to the property. https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetails...
- crooked-v 10mo ago
  Having to use the property on the element instance, rather than the actual HTML attribute, is exactly the kind of wrapper code I want to avoid if I'm using a built-in.
  - _heimdall 10mo ago
    What kind of control are you looking for? `open` works just like checked for a checkbox input. You can set the initial state in HTML and CSS can respond to changes in the attribute if a user clicks it. Markup won't have programmatic control over the attribute by design, that's always done in JS by modifying the element instance.
  - WickyNilliams 10mo ago
    You need some JS to change an attribute as much as you need JS to change a property. What am I missing? I hope the command attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...) will eventually support this out of the box. In the meanwhile you can write a single custom --toggle command which is generic and works with any toggleable element
rhdunn 10mo ago
If you specify the same name on each `details` element they behave like an accordion automatically [1], no need for JavaScript. If you set one of them to open that one will be initially open. [1] https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/#using_details_name_to_create_exclusive_accordions https://developer.mozilla.org/en-US/blog/html-details-exclus...
- crooked-v 10mo ago
  It's not about using it as an accordion, it's about controlling the open/closed state from other interactions.
- 6510 10mo ago
  different things with the same name? O_O
  - wartijn_ 10mo ago
    It’s the name of the accordion and matches how radio buttons work. If you want to distinguish them, you’ll give them different ids.
    - 6510 10mo ago
      I understand it, just wondering if it is good taste. On a different note, trying to use an accordion this simplistic is quite terrible. https://jsfiddle.net/8m0t5af6/ https://jsfiddle.net/8m0t5af6/ Or this? https://jsfiddle.net/8m0t5af6/1/ https://jsfiddle.net/8m0t5af6/1/ Not very nice.

eleventen 10mo ago

Out of curiosity, why have you needed to? This has never come up for me.

crooked-v 10mo ago
For a simple example, imagine buttons that opens a modal with a particular arrangement of open/closed accordions for each button.
- sfn42 10mo ago
  You can do that with a details element, you just need some code to actually do it. Which I'm pretty sure there's no possible solution that doesn't require some code to do that. Really don't see what your complaint is.

bikeshaving 10mo ago

I’m not sure this is correct. The DOM class HTMLDetailsElement has the `open` property, which you can use to read/write the details element’s state. If you’re using setAttribute/getAttribute just switch to the property. https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetails...

crooked-v 10mo ago
Having to use the property on the element instance, rather than the actual HTML attribute, is exactly the kind of wrapper code I want to avoid if I'm using a built-in.
- _heimdall 10mo ago
  What kind of control are you looking for? `open` works just like checked for a checkbox input. You can set the initial state in HTML and CSS can respond to changes in the attribute if a user clicks it. Markup won't have programmatic control over the attribute by design, that's always done in JS by modifying the element instance.
- WickyNilliams 10mo ago
  You need some JS to change an attribute as much as you need JS to change a property. What am I missing? I hope the command attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...) will eventually support this out of the box. In the meanwhile you can write a single custom --toggle command which is generic and works with any toggleable element

rhdunn 10mo ago

If you specify the same name on each `details` element they behave like an accordion automatically [1], no need for JavaScript. If you set one of them to open that one will be initially open. [1] https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/#using_details_name_to_create_exclusive_accordions https://developer.mozilla.org/en-US/blog/html-details-exclus...

crooked-v 10mo ago
It's not about using it as an accordion, it's about controlling the open/closed state from other interactions.
6510 10mo ago
different things with the same name? O_O
- wartijn_ 10mo ago
  It’s the name of the accordion and matches how radio buttons work. If you want to distinguish them, you’ll give them different ids.
  - 6510 10mo ago
    I understand it, just wondering if it is good taste. On a different note, trying to use an accordion this simplistic is quite terrible. https://jsfiddle.net/8m0t5af6/ https://jsfiddle.net/8m0t5af6/ Or this? https://jsfiddle.net/8m0t5af6/1/ https://jsfiddle.net/8m0t5af6/1/ Not very nice.