Accordions

Accordions—also known as sliders—are common design elements used to organize large sections of content into areas that expand and collapse. Accordions are effective in making the user feel less overwhelmed, as they can choose what sections to read by opening them.

If you are looking to place accordions/sliders on a web page in the campus content management system, Modern Campus, please use the built in Accordions widget. Please see: Webmaster's Blog: Accordions for more information.

The following is for informational purposes for those not using the campus CMS. 

Accordions may be implemented using the <details> and <summary> HTML5 tags, by combining HTML and CSS, or by combining HTML, CSS, and Javascript. Regardless of the implementation, some additional Javascript may be required to make accordions accessible. Please see: MDN Web Docs on the Details disclosure element for more information.

Learn More

To learn more about the principles of making accordions accessible:

Modern Campus CMS

University Marketing and Communications strives to make sure all widgets in our CMS exhibiting accordion behavior (sliders and FAQs) are automatically fully accessible.

To learn more about creating accordions in the CMS: