Hacker News Reader

Comment by crooked-v | Hacker News Reader

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.

View on HN

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/HTMLDetails...

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.

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.

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/...) 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

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-exclus...

It's not about using it as an accordion, it's about controlling the open/closed state from other interactions.

different things with the same name? O_O

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.

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/

Or this?

https://jsfiddle.net/8m0t5af6/1/

Not very nice.

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

For a simple example, imagine buttons that opens a modal with a particular arrangement of open/closed accordions for each button.

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.

Reply on news.ycombinator.com