928-523-1741
marketing@nau.eduAccordion block
When to use this block
Accordions are web design components that let you show headings while hiding blocks of related content. They are popular but often misused.
Below is an example of the block titled “NAU Accordion”, but it’s important to keep in mind that an accordion can also be achieved with the “Panels” block. For more information about that, please see this page.
You have two or more closely related topics accompanied by a medium amount of detailed content.
Frequently Asked Questions (FAQs) are good examples of accordion usage.
You only have a single topic and its related content to put into an accordion.
The content you want to hide in an accordion is very short.
The content you want to hide in an accordion is very long.
The simplest option is to display all of your text and images on the web page.
Another alternative is to use anchor links as a miniature table of contents on your page.
Tabs suffer from many of the same problems as accordions, and they present even more accessibility challenges.
Video Tutorial
Self-guided tutorial
Setting up your block
Let’s get started and add an NAU Accordion block to the page. Click the “Add block” button, the small black box with a plus sign, and search Accordion in the search bar.
Click the small black box with a plus sign inside the left nav section block, search “accordion”, select “NAU accordion” and add the block to the page. Make sure it is inside the left-nav section block.
Adding rows
To start adding content to your accordion block, click on the “add row” blue box. You can add as many as you need to display your content. The recommendation is to keep your accordion count between 3-15 rows.
Add 5 accordion rows to your example. Then proceed to delete one of them by hovering your mouse over the gray bar to the right side of the text box. Click the minus sign and select remove. This should leave you with 4 rows total.
Adding content
This block is divided into two sections: accordion header and accordion content.
The accordion header is where you will enter the information you’d like visible in a collapsed accordion. The section headers are meant to be brief but descriptive enough to indicate what the reader can expect to learn more about by clicking it to expand the accordion.
The accordion content is the section of content that is associated with each header. This section is hidden until clicked open by the reader. This content can be composed of 1-6 sentences or bulleted lists – keeping the content descriptive and concise.
Add the following information to the header and content boxes:
- Header: Where is the main NAU campus located?
- Content: Northern Arizona University is located in Flagstaff, AZ. Flagstaff is situated at 2,200 meters in altitude, enjoys an alpine climate, and is consistently rated one of the best college towns in the United States.
- Header: How safe is the campus?
- Content: NAU Flagstaff is one of the safest public university campuses in Arizona. Many people walk and bike around campus and the city.
- Header: Where can I live on campus?
- Content: NAU offers a variety of on-campus housing options. Students must complete a housing application and pay required fees to live on campus.
- Header: What student clubs and organizations can I join?
- Content: NAU has over 350 student organizations. There are cultural clubs, sports, and academic clubs, among others. If there isn’t a club that matches your interest, you can create your own!
Preview your work
Now that we have added our content, let’s preview our page. Save as draft so you don’t lose your work and we will preview in the desktop view.
Save to draft and preview on desktop. Click on the first two accordions open to demonstrate how they reveal the content. Click them again to close them.
Our accordions are working great and will be helpful to users seeking information on our site. It is ready to submit to the workflow.
