Web Style Guide
Menu
Search

Definition listAccordion

An accordion element embedded in a definition list item allows the user to expand/collapse related content that should not be visible at the first glance.

Minimum requirements
  • 1 definition list item
  • 1 accordion item - composed of:
    • 1 heading (div.title)
    • 1 block of collapsable content (div.content-box)

Quick access

UsageGuidelines
HTML structurePresetsVariations
Advanced settings

Presets

?

Variations

?
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HTML
Copy to clipboard





	

		

			Interactive viewUsageGuidelinesHTML structurePresetsVariationsTest pageGo to top		

	

	

		
Details

		
Usage
The accordion element is used inside a definition list whenever the inexistence of it would result in a very long list.
Publication lists make use of this combination.
Guidelines
  1. Should be embedded in a accordion component
HTML structure
Overall HTML view of an accordion element inside a definition list:
HTML file (.html)
        
(other component(s))

        
div.definition-list
            
div.header (optional)
                
div.title

            

            
dl
                
dt (one or more)
                    
(element(s))

                

                
dd (one or more)
                    
div.accordion
                        
div.header (one or more)

                        
div.content-box (one or more)
                            
(element(s))

                        

                    

                

            

        

        
(other component(s))

    
Presets
Definition list with accordion presets:
PresetDescription
DefaultDefault preset.
Variations
Definition list with accordion variations:
VariationDescription
DefaultThis snippet is composed of definition list with an accordion embedded.