Skip to Content Skip to Navigation

User Experience Toolkit

Expandable Content

Expandable content allows large sets of related content to become hidden from view by default. This allows users to selectively drill down to the content the are looking for.

Default Implementation

Example:
HTML:
<div class="ux-content-expandable">
	<ul>
		<li>
			<a href="#" class="ux-expandable" aria-expanded="false">Expandable Trigger 1</a>
			<div aria-hidden="true">
				<p>First expandable contents.</p>
				<ul>
					<li>
						<a href="#" class="ux-expandable" aria-expanded="false">
							Sub-expandable trigger.
						</a>
						<div aria-hidden="true">
							<p>
								Sub-expandable content.
							</p>
						</div>	
					</li>
				</ul>
			</div>	
		</li>
		<li>
			<a href="#" class="ux-expandable" aria-expanded="false">Expandable Trigger 2?</a>
			<div aria-hidden="true">
				<p>Second expandable contents.</p>
			</div>						
		</li>
		<li>
			<a href="#" class="ux-expandable" aria-expanded="false">Expandable Trigger 3?</a>
			<div aria-hidden="true">
				<p>Third expandable contents.</p>
			</div>	
		</li>
	</ul>
</div>
JavaScript:
<script>
	$(document).ready(function() {
    	ux.load("expandables");
	});	
</script>

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

Expandable contents are created by starting with an unordered list (ul) wrapped inside of a div with the class of ux-content-expandable. The required contents for each list item (li) that will be come expanadable should first an acnhor tag (a), and then a sibling div container. The anchor tag should also have the class of ux-expandable.

If content expandables are going to nest, that outter ux-content-expandable wrapper is unneeded.

Additional Implementation

Example:
  • Item 1

    Try to open another item.

HTML:
<div class="ux-content-expandable ux-only-one">
	<ul>
		<li>
			<a href="#" class="ux-expandable" aria-expanded="true">Item 1</a>
			<div aria-hidden="false"><p>Try to open another item.</p></div>
		</li>
		<li>
			<a href="#" class="ux-expandable" aria-expanded="false">Item 2</a>
			<div aria-hidden="true"><p>Try to open another item.</p></div>
		</li>
		<li>
			<a href="#" class="ux-expandable" aria-expanded="false">Item 3</a>
			<div aria-hidden="true"><p>Try to open another item.</p></div>
		</li>
	</ul>
</div>

If only one expandable should be open at a time, add the class of ux-only-one on the original outter wrapper div.

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 expendables on its own.

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