Component

Accordion

Description 

The Illinois components accordion provides CSS-driven expandable and collapsible areas which can be visually styled. 

What it looks like 

Example image (version 2.4, Dec. 8, 2021) 

Try it out 

• Component Builder (to see how it works with your own content and images) 
• Dev Codepen (to experiment with all the code)

Sample patterns 

(Change elements marked in bold to match your own content.)

Single item example (solid gray background, default open)

This is an example of a single accordion item.

<div class="il-accordion il-details-solid">
    <details open="">
        <summary> Item title -- this item starts open  </summary>
        <p> Accordion contents go here </p>
    </details>
</div>

Multiple item example (bordered, first item open, second item closed)

This is an example of a multiple item accordion with a bordered display method.

<div class="il-accordion il-details-bordered">
    <details open="">
        <summary>
            First item title -- this individual item starts open
        </summary>
        <p> First item information goes here </p>
    </details>
    <details>
        <summary>
            Second item title -- this item and other items will start closed unless you add 'open' to the details tag
        </summary>
        <p> Second item information goes here </p>
    </details>
</div>

Customizations and notes 

Changing from solid to outline 

Use the il-details-solid CSS class in the container which begins your accordion stack to have solid gray accordions like the screen shot above.

Use the il-details-bordered class in that container to have outlined accordions.

Changing whether an item begins open or closed when the page loads 

Use <details> for any accordion item you want to be closed when the page first loads.

Use <details open=””> for any accordion item you want to be open when the page first loads.

Syntax guide 

The default syntax: 

 <div class="il-accordion il-details-solid"> <!--or use il-details-bordered for the other style-->
    <details>
        <summary> Item title -- this item starts open</summary>
    </details>
</div>

Where to add elements: 

    <details>
        <summary> Item title -- this item starts open </summary>
        (More HTML goes here -- could be headers, paragraphs, tables, whatever you need)
    </details> 

Additional attributes for this component: 

details 

• Syntax:

     <details>
         <summary> Item title -- this item starts open </summary>
         (More HTML goes here -- could be headers, paragraphs, tables, whatever you need)
     </details> 

• Value: The container which encloses each accordion element. (For a three-item accordion, you would need three <details>(content)</details> pairs. 
• Default value: Nothing  
• Required: Yes, you must have at least one <details></details> container with a summary and content inside in order to create an accordion component.
• Duplicate: Yes, one for each accordion item

summary

• Syntax:

<summary>This is what you want your accordion to display when it's collapsed</summary>

• Value: The display text for each accordion item. 
• Default value: None
• Required: Yes 
• Duplicate: One per <details> accordion item 

CSS options 

il-accordion 

• Syntax: <div class=”il-accordion”>  
• Default value: If nothing else is specified, the accordion will display as –il-details-solid (shades of gray) 
• Required: Yes 
• Details: Put il-accordion in the container which will hold your <details></details> accordion items. This will usually be a <div></div> container. 

il-details-solid (or bordered)

• Syntax: <div class=”il-accordion il-details-solid”>  

• Color values available: 
  • il-details-solid
  • il-details-bordered

• Default value: If nothing else is specified, the accordion will default to il-details-solid 
• Required: No 
• Details: Put your choice of solid or bordered in the element which contains your <details> items. This usually means that it will be found next to the il-accordion class in a div. 

About this component 

• Type: CSS classes 
• Introduced in: v2.3.0; 9/29/2021 
• Deprecated?: No