Skip to Main Content

Beta Content Test: Accordions and FAQs

Add a collapsible FAQ or Accordion to your page

FAQs and Accordions are easy to create using the Source option in the editor using basic HTML semantics and the best part is they are accessible for all users as they automatically generate necessary ARIA components.

It is recommended that you place the code in its own RichText/HTML Source within your box.

You have three main options:

  1. Use a definition list
  2. Use headings paired with DIV tags
  3. Pull a topic in from LibAnswers

By default, each FAQ or accordion section will operate independently of the others in the group and all the headings will be on a purple background and there will be spacing between them.

If you wish to change this behavior then see the section below for Additional Options.

Usability and Accessibility of Accordions

The accordion colors, icons, and interactive elements were selected based on studies and guidelines from NNGroup and W3C.

Additional information about the usability and accessibility design considerations may be found on the script's example page.

Though the accordions themselves are implemented using UI/UX and Accessibility guidelines, it must be noted that their use must be appropriate for the final User Experience guideline.

According to Hoa Loranger from NNGroup in "Accordions Are Not Always the Answer for Complex Content on Desktops":

Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. ... Save people the hassle of clicking on links needlessly if their intention is to consume all of the content in the same session. As long as the content on a page is related, relevant, and formatted properly for the web, people will eagerly scroll the page.

And...

Accordions are more suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter.

For help writing an FAQ page or section, check out "FAQs Still Deliver Great Value" by Susan Farrell of NNGroup which even covers the idea that FAQs have made-up questions:

If you’re listening to your users, you know what their questions are.... Sometimes you have to rewrite questions to make them general enough to apply to most people who need that answer.

Headers and DIVs

You can use headers paired with div tags, wrapped in a parent div tag to semantically break up your content into collapsible elements.

Sample

What are headers?

Headers are HTML tags such as H1, H2, H3, and so on. They are great for separating sections of information within a page. While it breaks up content visually, it also breaks up content and places it within context for both non-sighted users and computers, making it easier to understand and navigate.

Why use headers?

If you are presenting large bodies of information that would normally be a single page broken up by sub-headings, then this is the format you should use.

H3, H4, or H5?

For accessibility reasons, headers need to be placed on the page IN ORDER. You can't have an H4 tag follow an H1 tag. Also, you can't use an H1 tag as that is reserved for the page title (and in LibGuides H2 is reserved for box titles.

So you need to pay attention to the outline structure of your page before deciding on H3, H4, etc. Most likely you will be using an H3.

Code

Note: To keep pages accessible, you should maintain proper heading levels. For example, if the previous heading was an <h3> then you should use <h4> in your code.

LibGuides uses <h2> for its boxes so any code immediately inside a box with no other headings should be <h3>. If you place it after an H3 however, you need to use an H4 and so on.

<!-- Div grouping of headers and div panels -->
<div class="faq2115-accordion">
    <h3>My question 1</h3>
    <div>My Answer 1</div>
    <h3>My question 2</h3>
    <div>My Answer 2</div>
</div>

Use a Definition List

A definition list is ideal for short explanations of terms or steps. Semantically, it is like a bulleted list except with terms instead of bullets or numbers.

My question 1
My Answer 1
My question 2
My Answer 2

Code

<dl class="faq2115-accordion">
    <dt>My question 1</dt>
    <dd>My Answer 1</dd>
    <dt>My question 2</dt>
    <dd>My Answer 2</dd>
</dl>

Pull an FAQ in from LibAnswers

This is useful if the FAQ you want to display is already a topic in LibAnswers.

First you will need to know the topic ID for the data-faq-topic attribute. Then you can add a simple line of code to your page.

You can also use data-faq-group to narrow down the topic to a specific library group. (The definition of a group is complicated and yet to be determined. Right now there is Law and Library)

Sample Tech FAQ

Code

It is good to know the URL of the topic so you can put it in the href attribute. The link is only displayed if there is a problem with the JavaScript or JavaScript is turned off. It provides an alternate method of access. While the link inside the DIV tag is optional and doesn't show when the FAQ is generated, it his highly recommended.

<div class="faq2115-placeholder-accordion" data-faq-topic="66817"><a href="">Direct link</a></div>

Single FAQ Item

You can also pull in a single item, or a comma delimited list of items using the data-faq-item attribute instead of a topic attribute.

<!-- One FAQ item -->
<div class="faq2115-placeholder-accordion" data-faq-item="323039"><a href="">Direct link</a></div>

<!-- Two FAQ Items -->
<div class="faq2115-placeholder-accordion" data-faq-item="323039,323035"><a href="">Direct link</a></div>

Additional Options: Changing default behavior

Allow/Don't Allow multiple

You'll notice that by default the Questions and Answers operate independently. Answers remain open when moving on to another question. This is to prevent "page jump" where a large body of text is open above (and possibly off-screen) and clicking on one below it would collapse the previously open answer shifting everything up and possibly out of view of the user.

Also, in this default state each of the headings are on a purple background and are spaced apart.

If you wish to instead close a previously opened question when another question in the group is selected you can change the data-allow-multiple="false" attribute in the parent wrapper (either the parent div or dl). This will also make the headings gray rather than purple and remove the space between them since they now all operate as a single unit.

Allow/Don't Allow Toggle

You may also notice that once an item is open, it can then be closed. If you want to disable this function for any reason, you can add the data-allow-toggle="true" attribute to the parent wrapper (either the parent div or dl).

Sample

This sample has allow toggle and allow multiple set to false. Notice that there is no spacing between the headings, they are gray, and selecting a different one will close the previous. You can re-enable toggling to close any open panel just by setting data-allow-toggle to true.

What are headers?

Headers are HTML tags such as H1, H2, H3, and so on. They are great for separating sections of information within a page. While it breaks up content visually, it also breaks up content and places it within context for both non-sighted users and computers, making it easier to understand and navigate.

Why use headers?

If you are presenting large bodies of information that would normally be a single page broken up by sub-headings, then this is the format you should use.

H3, H4, or H5?

For accessibility reasons, headers need to be placed on the page IN ORDER. You can't have an H4 tag follow an H1 tag. Also, you can't use an H1 tag as that is reserved for the page title (and in LibGuides H2 is reserved for box titles.

So you need to pay attention to the outline structure of your page before deciding on H3, H4, etc. Most likely you will be using an H3.

Code

<dl class="faq2115-accordion" data-allow-toggle="false" data-allow-multiple="false">
    <dt>My question 1</dt>
    <dd>My Answer 1</dd>
    <dt>My question 2</dt>
    <dd>My Answer 2</dd>
</dl>

Sample

This sample has allow toggle set to true and allow multiple set to false. Notice that there is no spacing between the headings, they are gray, and selecting a different one will close the previous.

What are headers?

Headers are HTML tags such as H1, H2, H3, and so on. They are great for separating sections of information within a page. While it breaks up content visually, it also breaks up content and places it within context for both non-sighted users and computers, making it easier to understand and navigate.

Why use headers?

If you are presenting large bodies of information that would normally be a single page broken up by sub-headings, then this is the format you should use.

H3, H4, or H5?

For accessibility reasons, headers need to be placed on the page IN ORDER. You can't have an H4 tag follow an H1 tag. Also, you can't use an H1 tag as that is reserved for the page title (and in LibGuides H2 is reserved for box titles.

So you need to pay attention to the outline structure of your page before deciding on H3, H4, etc. Most likely you will be using an H3.

Code

<dl class="faq2115-accordion" data-allow-toggle="true" data-allow-multiple="false">
    <dt>My question 1</dt>
    <dd>My Answer 1</dd>
    <dt>My question 2</dt>
    <dd>My Answer 2</dd>
</dl>

Sample

And finally, you can set the first item to be open on load by adding data-first-item-open="true".

What are headers?

Headers are HTML tags such as H1, H2, H3, and so on. They are great for separating sections of information within a page. While it breaks up content visually, it also breaks up content and places it within context for both non-sighted users and computers, making it easier to understand and navigate.

Why use headers?

If you are presenting large bodies of information that would normally be a single page broken up by sub-headings, then this is the format you should use.

H3, H4, or H5?

For accessibility reasons, headers need to be placed on the page IN ORDER. You can't have an H4 tag follow an H1 tag. Also, you can't use an H1 tag as that is reserved for the page title (and in LibGuides H2 is reserved for box titles.

So you need to pay attention to the outline structure of your page before deciding on H3, H4, etc. Most likely you will be using an H3.

Code

<dl class="faq2115-accordion" data-allow-multiple="false" data-allow-toggle="false" data-first-item-open="true">
    <dt>My question 1</dt>
    <dd>My Answer 1</dd>
    <dt>My question 2</dt>
    <dd>My Answer 2</dd>
</dl>

dfgsdfg

Web Developer

Profile Photo
Chad Kluck
he/him
Contact:
O'Shaughnessy-Frey Library Room 207
651-962-5416