Just use a button

Why is the <div> option proposed by anyone in the first place?

Based on what I see in the world, I suspect one reason is that a <div> makes it easier to apply some bizarro appearance to the button, so it not only doesn’t act like a button, it doesn’t even look like a button.

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

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`

The most common reason I've seen is whining about having to override default button styles.

This comes from either business or the UX people who want stuff to look pixel perfect to their stupid wireframe.

Why does a website that sells to a pretty much captive audience who cares more about functionality than looks obsess so much about every single button looking pixel perfect to some arbitrary wireframe, I will never know.

I too have encountered this reasoning.

Then I write some basic CSS and show them they have nothing to fear.

Yet, I still remain irritated beyond belief that its such a common thing. In 2025. Hell, in 2017!

I don't know what to do about it, other than constantly remind people about things, but it gets tiring.

Though, its a great interview question. Its a quick way to understand if someone knows the fundamentals or not.

Kinda like how people got ".bind" wrong on functions for years.

I'll do you one better and argue they could `<details>` elements. This is a perfect use case for that.

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.

> 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?

Things looking intentionally designed in great detail is also a function, despite programmer protests.