Drop-down list?

Help
,
1

I want to change this page so that each month’s books are tucked away by default, and appear when you click on the month’s name. Can this be done with additional HTML tags or a bit of Javascript?

2

Sounds like a perfect use-case for the <details> element!

You can use it like this:

<details>
  <summary>Month</summary>
  <ul>
    <li>Book #1</li>
    <li>Book #2</li>
    <li>Book #3</li>
    ...
  </ul>
</details>
4 Likes
3

Yeah, <details> is perfect for this situation.

I make heavy use of it on my fiction page.

Only downside is that I never quite got the hang of using <h2>, <h3>, etc. inside a <summary> element.

1 Like
4

What issue(s) have you run into? I think I’ve had to make the headings inline before to make them on the same line as the little arrow. (I haven’t tested with screen readers, though - I feel like I read somewhere that the headings aren’t necessarily exposed properly…)

5

@starbreaker wrote:
<summary> doesn’t collapse properly when there’s a header element inside, even if I add something like

summary h2 {
  display: inline;
  font-size: 1rem;
}

or

summary > * {
  display: inline;
  font-size: 1rem;
}

The examples from CSS Tricks might have worked in 2021, but they doesn’t seem to work in Firefox or Safari today.

(Even in the future nothing works.)

6

Oh, weird! Those codepen examples in the CSS Tricks article still work for me, so good to know that isn’t universal. And yeah, I think ideally if you need a heading, a disclosure widget using JavaScript, a button, and appropriate ARIA is probably best, especially for accessibility.

Anyway, sorry to go off on a tangent!

7

While we’re complaining about <details>, another unfortunate aspect I’ve found is how sad that it cannot collapse without CSS enabled. Like, really? HTML can’t handle that? Oh well… ¯\(ツ)/¯