The focus of this post will be Accordions, a component that are likely to be familiar to most developers. Accordions are useful for pages that have lists of content, like “Frequently Asked Questions” pages. A nice feature of accordions is that they allow the user to quickly scan for the specific information that they care about, and then expand the details of that content out by clicking. In this way they serve a function somewhat similar to a menu.
I’ve created a demo accordion below. It’s pretty basic, but it fits the description above and also includes some animations. Bootstrap is being used for the base styling, glyphicons, and grid layout of this example.
- The :checked selector – Basically CSS has an easy way to detect whether a checkbox is checked or not.
- The ~ (sibling) selector – Another really powerful selector, it lets you change the styling of an element based on it’s siblings.
- The ability for a checkbox label to toggle the checkbox on click, even if the label is in a different location and even if the checkbox itself is not visible at all.
You can combine the three ideas above to toggle basically anything on click. First place the checkbox in the same parent container as the elements that you want to toggle (it is important that the checkbox is placed before and not after, as the ~ selector will only look at preceding elements. I feel like CSS should have a selector that does the opposite as well, but right now it doesn’t). Next wrap the element that you want to be clickable (in this example it is the arrow glyphicon) in a label with a “for” reference to the checkbox. Finally apply the checked and sibling selectors to define how the elements display when the checkbox is checked, and set the checkbox itself to display: none.
As usually, it is hard to explain code with words, so please check out the codepen itself.
Another part of this example is the transitioning of the paragraph as the accordion opens as closes. While you don’t necessarily have to do this, I think that it provides a better UX this way. Since you can’t actually transition from height: 0 to height: auto, I transitioned the max-height from 0 to a value that should be higher than the expanded height.
This technique isn’t without it’s limitations. These include the following:
- You need to set an id for each item of the accordion. This is certainly doable and even HTML generated by a backend templating language could do this, but it does add some complexity and I’ll admit that it does feel a little wrong to do things this way.