Accordions

If you have a lot of content on your page and feel like you want to group it under headers to reduce clutter then you're in luck we present you accordions.  These styles allow for varied level of use but the setup is the same.  Each style uses a header 3 (h3) to present the user with an element that can open / close the accordion section.  Headings should be used to lead the user to more content and should be meaningful to someone who may not be familiar with your site.  A good use of accordions is for an FAQ, further readings, or important but not critical information.

Standard Accordions

This style was the original look and feel for accordions.  There are options here that will auto close other accordions as well as single use open/close styles.  If you plan on having items that you want to copy/paste out of use the accordion-form for that.

Example Standard

This is some sample content to demostrate a concept for how the standard accordions work.  Check out the page we have for full documenation and examples of all standard styles.

Right Arrow Accordions

A recent addition to accdions is the use of a single open/close style that puts a drop down arrow on the far right side of the accordion.  This style also comes in the standard colors that are used by the Campus templates so you can better match your own content.

Example Right Arrow 

This is a sample of the right arrow accordion style.  It comes in multiple color styles and is always setup to be a single use open / close accordion which means you can close all or open all at any time. 

Check out the right arrow page for full documentation and samples of available options.

Requirements For Non-OmniUpdate Sites

  • Requires CSS file "_accordion.css" and JS file "Accordion_V4.js"
    At the bottom of the page include a javascript which runs the accordion setup function
  • You must have your content in any div with ID set to 'divA' through 'divZ'.  The setup file will look for these elements and check for accordion styles.
  • Set desired accordion class on each div to be included as an accordion section.  See the accordion style pages for specific class names.
  • Use H3 for title tab

Code Example

<div id="divA" class="accordion-style-goes-here">
<h3>Section 1</h3>
<p> Insert text description here. </p>
</div>