Accordion on Base Toolkit - Version 2.13
Preview this component (Custom Element; v2.15.0; 3/3/2023)
Guidelines using the component
Technical Information
This is normally used with the il-accordion-panel component to create an accordion. Only il-accordion-panel components should be in this.
Description
Accordions are described at https://www.nngroup.com/articles/accordions-complex-content/. "An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner."
Theme colors
By default, the gray theme is used. You can switch this to a white background using the il-theme-white class.
Accessibility
The header slot should be used to display a header of the appropriate level. Unlike an HTML details / summary tag, this will not swallow the header information.
Test information
First paragraph
Second paragraph
Test information #2
First paragraph #2
Second paragraph
Test information #3
First paragraph #3
Second paragraph
Component Display
Change Your Content and Options
Template -- enter raw HTML here
Important Classes
N/A
Classes
Attributes
Advanced Options
These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.
Custom Style Tag before text
How to add it to your page
Copy and paste this in your page. Remember
- Make sure you have updated your component to make sure the below code is completed.
- Make sure you have the Header code in your header.
Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.