Styling “Details” & “Summary” HTML Tags

Back in Web #6, the ease of the details / summary tags was mentioned. All you had to do was drop support for Internet Explorer and then you could have a pure HTML / CSS solution to creating web boxes that could be opened or closed. It would be almost two years since such a feature was added to this website. But with the addition of the Farmside Guide, now there’s a great reason to use the Details & Summary HTML tags. There’s a video on Photics.TV that explains the CSS styling of a Frequently Asked Questions (FAQs) webpage.

Here’s CSS mentioned in the video…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

details {
     border: 1px solid rgba(128, 128, 128, 0.5);
     border-radius: 10px;
     padding: 10px 15px;
     margin-bottom: 10px;
}
 
details>div {
     border-top: 1px solid #888;
     padding-top: 10px;
     margin: 10px 0px 0px 0px;
}
 
details:hover:not([open]) {
     background-color: rgba(128, 128, 128, 0.125);
}
 
summary {
     cursor: pointer;
     font-weight: bold;
     user-select: none;
     -webkit-user-select: none;
}

With less than two-dozen lines of CSS, the details and summary tags can be styled to look more natural. No plugins were necessary, which is nice!

Not even JavaScript was used to create this feature, which makes it even easier. All that was necessary was to drop support for Internet Explorer. That’s not even a tough decision. While that browser was mighty back in its heyday, it really shouldn’t be used today.

This method is a little tedious though, as there were many questions / collapsible boxes used in the Farmside guide. A WordPress plugin could make editing content easier. But since FAQ pages are not very common on this website, not using a plugin is preferred. While the initial HTML editing of the FAQ is tedious, there’s not much to do afterwards with this easier method.