Digital pattern library

Accordion

The accordion pattern presents an expandable and collapsible section of content. Accordions shorten pages and reduce scrolling, but they require users to click on topic headings to find information. Therefore, accordions should be used sparingly. For more information see the Nielsen Norman Group report on accordion usability.

Rules for accordions

Please note

Additional WAI-ARIA markup is automatically added to the accordions using javascript. Accordion items and their associated groups are also automatically given unique id values using javascript. This is to improve accessibility and to ensure each id is indeed unique.

Options available

Single accordion

Consider if the content would be better visible at all times before using a single accordion to hide it from the user.

This example shows a single accordion with content divided between two columns.

Example

Code

Accordion - group

When an accordion contains more than one item these must be grouped together, using the .accordion-group class. A toggle button, to open or close all items within that group, is used to reduce potential user interaction cost.

This example shows an accordion group on a light grey background.

Example
Code 



    

  • 
	
    
		
    
	    	
	    
    
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	
    
	

    •

Accordion with intro - group

Where it may be beneficial to give additional information about the contents of an accordion, before the requirement to open it, then a short introduction may be included.

Example
Code 



    

  • 
	
    
		
    
	    	
	    
    
	    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	    
    Vestibulum ac rutrum tellus, quis porttitor urna.
    
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	    
    Vestibulum ac rutrum tellus, quis porttitor urna.
    
	
    
	

    •

Accordion with key info - group

Where there are different types of information, that would all benefit being shown immediately, these can be shown in icon / value pairs. The use of icons quickly conveys the meaning of the associated text while keeping space to a minimum.

Example
Code 



    

  • 
	
    
		
    
	    	
	    
    
	    8.00am to 2.00am
	    1,200 capacity (open to all)
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	    9.00am to 7.45pm
	    400 capacity (open to all students)
	
    
	

    • 

  • 
	
    
		
    
	    	
	    
    
	    9.00am to 9.45pm
	    400 capacity (open to all students)
	
    
	

    •