Using and Improving the Accordion Block

The Accordion control lets you create a document with outline entries that a visitor can click to expand and see their contents. This isn’t built in to the WordPress Blocks editor, but there are plugins to add it.

The above example was created using the Genesis Blocks plugin, but the expand/collapse capability is built in to the web browser, so all Genesis adds is the ability to insert one of these sections — and some styling to create the gray background rectangle and add some padding.

Without that added styling, the Accordion isn’t pretty. The only indication there’s anything to see is a little triangular marker, and there’s no formatting or indentation to distinguish the heading from the contents from the text outside the section.

When I recently had occasion to use Accordion in the Genesis plugin, I felt it could be improved further. When I move the mouse over something clickable, I like the mouse cursor to change to indicate that. A background color change is also an eye-catching way to show you’re passing over a control. So I added custom styling to do those things, and you can see the effects in the first example above. In case you’re viewing this on a device that doesn’t support hovering, this is what it looks like.

With my custom change, when you move the cursor over the heading, the background color changes and the cursor shape changes to a “zoom in” or “zoom out”, depending whether the section is already open. The Genesis Blocks default behavior has no hover behavior. Here’s the CSS I used entered in the “Additional CSS” section in Customize:

/* improve the Accordion block. */
summary:hover {
   background-color: #b6e5ea !important;
   cursor: zoom-in;
 }
 details[open] summary:hover {
   cursor: zoom-out;
 }

You can alter this to suit yourself, of course. You might prefer a different background color or cursors. I think the “zoom in” and “zoom out” cursors give a good hint at what happens if you click, but there are other cursors to choose from.

I added the “!important” to override the background color specified by the Genesis Blocks stylesheet. Generally it’s better to do this by writing a more specific selector (e.g. “div.gb-block-accordion summary:hover“), so that you don’t accidentally affect the appearance of the same element in other parts of your site (for instance if you also had a click-to-expand in your sidebar widgets). But I wanted this example to work in a variety of situations rather than being specific to Genesis Blocks.

In the second rule, the expression “details[open]” specifies the rule only applies when a details element has an attribute named open; the browser inserts this attribute when you click to expand it.

There is of course more you can do to style your accordion sections, using the above rules as a starting point. I favor a “clean” look without too many edges, so I didn’t want to mess with the heading appearance, draw boxes around the “detail” content, and so on.

Note: I wrote a support request to the Genesis Blocks plugin developers asking them to improve the hover behavior of this control.