Accordions

An accordion is a vertically stacked list of links that can be clicked to reveal or hide content associated with them. They can be used to consolidate long pages however there are usability shortcomings that should be considered:

  • Accordions force people to click on links one at a time to display the page's content. This can be cumbersome especially if there are many topics on the list that individuals care about. If people need to open the majority of subtopics to have their questions answered or to get the full story then an accordion is not the way to go. In this situation, it’s better to expose all the content at once.
  • Hiding content behind links diminishes people’s awareness of it. An extra step is required to see the information. Accordion links must be descriptive enough to motivate people to click on them.
  • Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions.
  •  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.

Here is an example of content structured using accordions:

Some content goes here.
More content goes here
More content, etc.

How to create Accordions:

Implementing accordions within a page is fairly straightforward, but it does require some HTML coding.

Screenshot of Content Editor source view

 
  1. In the body area, switch to source view
  2. Wrap your elements in the following two classes: "accordion" and "accordion_content"
    <div class="accordion">Some clickable title goes here</div>
    <div class="accordion_content">
    The content I want shown when it expands goes here</div>

Training Calendar
CMS Help

If you are experiencing a critical issue with your live website, please contact the IT Customer Service Center at 864-8080 or itcsc@ku.edu.

For questions on CMS policy, look & feel, and all other issues, please visit our help page.

Please contact web services at 864-6415 or webservices@ku.edu for help with your site

Online help can be found under the How-To's section of this website.

One of 34 U.S. public institutions in the prestigious Association of American Universities
Nearly $290 million in financial aid annually
44 nationally ranked graduate programs.
—U.S. News & World Report
Top 50 nationwide for size of library collection.
—ALA
23rd nationwide for service to veterans —"Best for Vets," Military Times
KU Today