Accordion/collapsible content

Occasionally a page has an extensive amount of content associated with it.  Where possible, these pages should be broken out into multiple pages; this improves searchability for your site.  However, on occasion it is neccesary to present all the information on the same page.  Accordions are one way to make this content more presentable.

Here is an example of content structured using accordions:

Some content goes here.  You can include pictures, links, etc
More content goes here
More content, etc.

Accordions are most easily setup using the "source" view of your content.  
Screenshot of Content Editor source view

To implement them, wrap your elements in the following 2 classes: "accordion" and "accordion_content".  

For example:

<div class="accordion">Some clickable title goes here</div>
<div class="accordion_content">The content I want shown when it expands goes here</div>

This class can be applied to HTML tags such has <H1-H6>, <div>, <p> and <a>. Make sure that "accordion_content" always follows directly after "accordion".


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.