The Tool Box: Expand/Collapse Tool

open books

The Expand-Collapse tool is a very simple tool, but can be useful for specific applications on your website. This tool allows you to create accordion-style text, where your users click on a “+” to read more about a specific topic. It’s ideal for text-heavy pages where your users may be looking for very specific information.

For example, for a frequently asked questions pages, you can put the questions as the initial content that shows when collapsed and the answers as the expanded content that show when your users click on the “+”.

Screen Shot 2015-04-06 at 10.20.31 AM


For a Frequently Asked Questions page, this allows you to include detailed answers to your questions, without forcing your users to scroll through all of the long answers to get to the question that they’re looking for. The FAQ page is by far the most common way that this tool is used on our customers’ websites.

Like with any tool, there are also creative uses for this tool. Rock Valley Christian School shares their supply lists by grade using the Expand/Collapse tool. This allows them to put all of the grades supply lists on one page, without forcing parents to scroll through all of their lists to find their grade. You can see their example here.

Another customer who uses this tool uniquely is Victory Christian School in Tulsa. They have a directory of all parent businesses. In the collapsed section of the content, they have the types of businesses and then in the expanded content, they have the full business information and how you can contact them. This is a great use of this tool to encourage school parents to support each other’s businesses. You can see Victory Christian School’s parent directory here.

There are lots of ways that you can use the Expand-Collapse tool, but do use caution, like you should when doing any content-building on your website. You may wish to have the initial content larger to make it stand out, but we do not recommend using one of your larger headings such as Heading 1 or 2 for this purpose. In addition to making the text very large on the page, it is a poor search engine optimization practice. You can read more about how headings affect SEO in this recent blog article.

While we mentioned at the outset that it is ideal for text-heavy pages, if your end users will generally want to read all of the content on your page, then the Expand/Collapse tool may not be the best option for you. You should also be careful to limit how many sets of content you put onto one page, generally to about a dozen or fewer, excluding special exceptions like Victory Christian School’s parent directory. It is better to break your content up onto multiple pages if it is becoming difficult to find the initial question or content at a quick glance.

The Expand/Collapse tool can be a robust tool for the right applications. Use this tool for your FAQ page, or another creative use. If you need additional assistance on the details of adding this tool to your website, see our support article here or contact our Support team.

Tags: , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our RSS Feeds

Blog Search

Join Us on Twitter

Join Us on Facebook