←back to thread

Just use a button

(gomakethings.com)
284 points moebrowne | 5 comments | | HN request time: 0.219s | source
Show context
flemhans ◴[] No.45774727[source]
Why is the <div> option proposed by anyone in the first place?
replies(3): >>45774762 #>>45774882 #>>45775944 #
1. Joker_vD ◴[] No.45774882[source]
Well, have you been on, I don't know, TV Tropes? They have those long lists, that are separated into "folders" on a single page. You can click on those "folders" to expand/collapse them, and it's implemented as a <div> with "onclick" property and <ul> inside it (well, used to IIRC; nowadays this <ul> is a child of a sibling <div>).
replies(2): >>45775658 #>>45777722 #
2. 1-more ◴[] No.45775658[source]
what's annoying about that example is that all of those <div>s could be buttons with no other changes. The only content inside the button <div> is the title and folder icon, not the list of examples associated with that title. That's just fine for a button!

The other thing I'd do is add `aria-controls=folder0` to the button that toggles visibility of the list with `id=folder0`

replies(1): >>45776461 #
3. no_wizard ◴[] No.45776461[source]
I'll do you one better and argue they could `<details>` elements. This is a perfect use case for that.
replies(1): >>45777052 #
4. 1-more ◴[] No.45777052{3}[source]
I use them EXTENSIVELY but some don't like them for being annoying to control en-masse with the "toggle all folders" button at the top. But yeah I 100% agree with you. I've snuck them into a webapp where I just needed that much local state rather than have the whole page's state care about the collapse/open state of that one thing.
5. zahlman ◴[] No.45777722[source]
> You can click on those "folders" to expand/collapse them, and it's implemented as a <div> with

... Isn't that what <details> and <summary> are for?