Using Tabs, Toggles & Accordions on Church Websites

Tabs, toggles, and accordions are three of the several tools that make it easy to do two things: organize your website content, and limit the amount of information on a screen at one time. Let’s take a look at how you might use them on your church website.

Demo of Tabs

Your awesome content would go in this area – whatever you’d like to include.

On tab number two, you get a new, fresh space to put something else that is useful.

Here’s still more of your awesome content. Isn’t this fun?

We hope you had fun clicking around and testing these tabs!

When should you consider using tabs? First, use them when you want to consolidate related information. Second, use tabs when you want to reduce the amount of content on a screen to make it easier to grasp quickly. Some examples of content that works well in tabs includes:

  • Categories of information. For example, a mid-sized or large congregation might have four tabs related to its Sunday morning education ministries: children, youth, young adults, and adults.
  • Details related to an event. For example, if you are offering a conference, you could have a tab for speakers, workshops, registration, and so on.
  • Information for multi-campus settings. If a ministry takes place at more than one site, you could use tabs to differentiate details about each setting.
  • Months or years. If you have an event with completely different information for each month, such as a concert or speaker series, you might use tabs for each of the next few months the program takes place.

Demo of Toggles

Toggle Demo

Here’s the text area for the first of these toggles.

Toggle Demo #2

Here’s the text area for the second toggle area. Did you see how the first one closed? You can decide if you want it to remain open or closed when you create the toggle.

Toggle Demo #3

Here’s the text area for our final toggle. Pretty useful feature, huh?

Toggles and Accordions are much like tabs in that they are terrific for consolidating and organizing information. In a sense, they are a bit like vertically-oriented tabs. When you click on one, it opens, displaying more information. Accordions are slightly different in that they also close the previously opened item. Toggles and Accordions (hereafter I’ll just use toggle) work really well for situations such as:

  • Frequently Asked Questions (FAQs). Each question can have its own toggle.
  • Short news items. Let’s say you wanted to group weekly news items on one page or in one post. Using a toggle would make it easier for those on a mobile device to scroll through the news that didn’t interest them.
  • Lists. Tabs work best when there are just a few items, but if you have a longer list – such as a listing of your small groups – toggles could be an effective way to display them.
  • Explanations. Sometimes you may want a few columns of photos or logos but don’t want to put a full description beneath each one. A toggle below each photo gives users an option to see more information if they want it.

Final Thoughts

Toggles vs. tabs vs. accordions? A lot of it comes down to what you think will look good visually, how long your explanatory text is (short: tabs; longer: toggles), whether you think it’s helpful to have more than one section open at a time (if so, use an accordion), and what kind of user experience you are hoping to create. You can always cut and paste between toggles and tabs, so if you create one type and find it isn’t appropriate, it isn’t too much work to switch to the other one.

Keep in mind that both tabs and toggles don’t really speed up the time it takes a page to load, because all of the content is still being put into memory. Instead, by limiting the information on a page, what you’re hoping to speed up is the user’s ability to process and find information that is relevant for them.

For more information and instructions, see the Divi pages about the Tab and Toggle and Accordion modules.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.