Skip to Content Skip to Navigation

User Experience Toolkit

Expandable Containers

Expandable Containers are a way of hiding a section of content that all share a common header.

Default Implementation


Main Content Header

This is the content of the the container expandable.

<div class="ux-container ux-container-expandable">
	<a href="#" class="ux-expandable" aria-expanded="true">
		<h3>Main Content Header</h3>
	<div aria-hidden="false">
		<p>This is the content of the the container expandable.</p> 
	$(document).ready(function() {

If the page that this component is being added on containes a side nav, Then the ux.load process is not needed.

In order to implement an expandable container place all expandable content into a common div wrapper with the class of ux-container and ux-container-expandable. Inside of this wrapper div add a anchor (a) with the class of ux-expanadable. The contents of this anchor should be a HTML header from h3 - h6 The next sibling element should be another div without any classes.

By default all expandable containers are open. If the container should be closed by default add the class of ux-closed.

Accessibility Requirements

Expendables require two additional attributes for the components to meet accessibility requirements; these attributes are aria-expanded and aria-hidden. On all anchor (a) tags with collapsed contents should have the attribute of aria-expanded with a value of false. If the contents are expanded on page load, then the aria-expanded should have a value of true. The actual expandable container (the div that follows the anchor tag), should have an additional attribute of aria-hidden. By default if the contents are collapse then attribute value should be true and if the contents are open by default the value should be false.

Developers do not have to worry about updating the aria attributes. By default UXT will update all attributes using UXT expandables on its own.

Thanks for the feedback! It will help us improve your experience.