Invisible Accordions

How to spice up any accordion feature on your website!

An update to this article has been added below.

Accordions are a great tool to display tailored information for your sites users. With it, users can read the title or brief synopsis of the material inside, without taking up a large chunk of space.

Unfortunately, by default WordPress auto-opens the topmost section whenever your website is loaded, such as is shown in the image provided.

Thankfully, there is a way to bypass this without too much hassle, and all it takes is two simple words.

display: none;

Invisible Tab

Invisible Body Content

Second Toggle Tab

For example, this is what your tab layout should resemble when using your DIVI Builder Module.

Assorted Information

As a general guideline, hiding the first toggle helps keep your site a bit cleaner and less cluttered when the user first loads it up.

When making your accordion, first create a toggle that will serve as the invisible tab.

In the advanced tab under Custom CSS for that toggle, write “display: none;” (sans quotes) into the tabs – depending on which aspect of the toggle you’d prefer to hide.

Before
Main Element
After
Toggle
Open Toggle
Toggle Title
Toggle Icon
Toggle Content

To ensure that there is no way of accidentally viewing this tab, it is recommended to write the code into all the boxes.

Hopefully, this guide will have been some use to you. Please, let us know if you have any questions or concerns about this material. Leave us a comment down below, or email us at wpress@uark.edu

**UPDATE**

There has been an update to DIVI and this effect can now be achieved through the Accordion Settings. In the Design tab, scroll down to Toggle Text. At the end of this section you’ll see two options, Initial state and Closeable. Initial state is the option you’ll want to change for this desired effect. Closeable changes the default of always having one accordion tab open.