Accordions

These accordions have been created using javaScript, jQuery, HTML and CSS. The neccessary code is shared below.

The accordion is created with a button using class accordion.

When to Use

Accordions help with cognitive load on pages where there is a lot of content that for some reason cannot be separated onto multiple pages.

With accordions the user in charge of showing the content, and can choose only the content they are interested in.

Accordions should only be used when a minimum of three will be needed. Expand and collapse buttons should always be used.

Example

First Example Accordion Second Example Accordion Third Example Accordion

Code

The code sample below allows you to quickly implement accordions into your prototype.

<button class="accordion" id="a1" onclick="toggleAccordion('1');" aria-expanded="false" aria-controls="accordionHTML" aria-label="This button is an accordion that shows and hides the necessry HTML to implement an accordion">First Example Accordion</button>				
<div class="accordionText hide" id="aText1" aria-labelledby="a1">	
	<dl><dt>“Wars not make one great.”</dt><dd>--Yoda (Star Wars: Episode V — The Empire Strikes Back)</dd></dl>
</div>
<button class="accordion" id="a2" onclick="toggleAccordion('2');" aria-expanded="false" aria-controls="accordionHTML" aria-label="This button is an accordion that shows and hides the necessry HTML to implement an accordion">Second Example Accordion</button>				
<div class="accordionText hide" id="aText2" aria-labelledby="a2">	
	<dl><dt>“Governor Tarkin! I should have expected to find you holding Vader's leash. I recognized your foul stench when I was brought on board.”</dt><dd>--Princess Leia Organa (Star Wars: Episode III — A New Hope)</dd></dl>
</div>
<button class="accordion" id="a3" onclick="toggleAccordion('3');" aria-expanded="false" aria-controls="accordionHTML" aria-label="This button is an accordion that shows and hides the necessry HTML to implement an accordion">Third Example Accordion</button>				
<div class="accordionText hide" id="aText3" aria-labelledby="a3">	
	<dl><dt>“The ability to destroy a planet is insignificant next to the power of the Force.”</dt><dd>--Darth Vader (Star Wars: Episode V — The Empire Strikes Back)</dd></dl>
</div>

function toggleAccordion(a_No) {
	$('#a' + a_No).toggleClass('expanded');
	$('#aText' + a_No).toggle();
	$('#a' + a_No).prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	
	checkButtons();
}

function checkButtons() {

if ( $("#aText1").is(":visible") && $("#aText2").is(":visible") && $("#aText3").is(":visible") ) { 
	
		$("#btn-expand").addClass("on");
		$("#btn-collapse").removeClass("on");
		
	} else {
	
		$("#btn-expand").removeClass("on");
	}
	
	if ( $("#aText1").is(":hidden") && $("#aText2").is(":hidden")  && $("#aText3").is(":hidden") ) { 
	
		$("#btn-expand").removeClass("on");
		$("#btn-collapse").addClass("on");
		
	} else {
	
		$("#btn-collapse").removeClass("on");
	}
}
function collapseAll() {

$("#btn-expand").removeClass("on");
	$("#btn-collapse").addClass("on");

if ($("#aText1").is(":visible") == true) { 
		//hide accordion1		
		$("#a1").toggleClass('expanded');
		$('#aText1').toggle();
		$("#a1").prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	}
	
	if ($("#aText2").is(":visible") == true) { 
		//hide accordion2
		$("#a2").toggleClass('expanded');
		$('#aText2').toggle();
		$("#a2").prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	}	
	
	if ($("#aText3").is(":visible") == true) { 
		//hide accordion2
		$("#a3").toggleClass('expanded');
		$('#aText3').toggle();
		$("#a3").prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	}	
}

function expandAll() {

$("#btn-expand").addClass("on");
	$("#btn-collapse").removeClass("on");
	
	if ($("#aText1").is(":hidden") == true) { 
		//show accordion1		
		console.log('show accordion 1');
		$("#a1").toggleClass('expanded');
		$('#aText1').toggle();
		$("#a1").prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	}
	
	if ($("#aText2").is(":hidden") == true) { 
		//show accordion2
		$("#a2").toggleClass('expanded');
		$('#aText2').toggle();
		$("#a2").prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	}
	
	if ($("#aText3").is(":hidden") == true) { 
		//show accordion3
		$("#a3").toggleClass('expanded');
		$('#aText3').toggle();
		$("#a3").prop('ariaExpanded',function(i,val){return val =='false'?true:false;});
	}
}

Last Modified: June 2, 2025