Accordion

Accordions are a prevalent user interface (UI) design pattern used on web pages to assist users in navigating large content sections without being overwhelmed by information overload. This design pattern accomplishes this by collapsing content sections into accordions and providing visible labels for users to click on to expand their contents.

This approach helps reduce the overall cognitive load on the user by breaking down large amounts of content into manageable chunks that they can interact with. Accordion labels should be written in plain language to provide information scent, giving users an idea of what content is contained in that section before opening it.

Accordions are best used when dealing with related information and when large amounts of information are involved.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files l coc-accordion-tabs.js

Functional grouping: Containers

Demo

Accordion heading

Question 1

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.

Question 2

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.

Question 3

Some data
Icon Text Description

Singles

Singles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Couples

Couples

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Families

Families

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore:

Code


				
			

		
		
			
Responsive preview

			

				

					
				

			

		

		

	

    	




    
    
    



    
        

            

                
                    





    
    
    



    
    
        

           Usage best practices
        

        








    
    
    


In general, accordions should be used to break up large sections of content related to the page topic into smaller chunks.


To help users understand related sections of content, it is also beneficial to add a heading title above the accordions indicating the content topics for the group of accordions.



    






                
                    





    
    
    


Usage examples:




    

  • frequently asked questions (FAQs)

  • grouping information by quadrants




    






                
            

        

    
    
    




    
    
    



    
        

            

                
                    





    
    
    





    
        
            
Do
                
                
            

        
        
    
    
    




    
    


Keep section titles clear and succinct so it's quick and easy to read.



    





Use the section headings for each accordion for information scent or cues that help users find the content they are looking for on a topic.



    





Order accordions according to user needs.



    



    









                
                    





    
    
    





    
    
        
            
Don't
                
                
            

        
        
    
    




    
    


Do not use accordions as a way to shorten web pages.



    





Do not put must read information inside a collapsed accordion as users may not expand an accordion section to read the content.



    





Do not nest accordions inside other accordions for web content as this increases the complexity of interacting with it.