The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
Accordions show and hide information that is not necessary at all time with one click.
Accordions can be used to divide and collapse information that is not necessary to see all at once, i.e FAQ, Terms and Conditions. It structures content and can make it easier for the user's eye to find content, since we are showing the headers (whilst hiding the detailed information). It works especially well when users know what they are looking for.
This component is best suited for plain text, lists, tables and inline links. The header "cell" can contain a header only, or a header with a sub-line.
We would like to point out that scrolling is your friend. You can choose to present "longer" content on one page without hiding it in an collapsable component.
The accordion hides the majority of the content. Therefor it is not recommended for interactive components that requires the user to interact (inputfields, call-to-action buttons, etc) or entire user flows.
If there is more complex content, consider splitting up the information by using sub-pages or tabs which will not hide the content.
The default accordion is collapsed with the chevron pointing down. There is a grey hover on the header "cell". When the user clicks anywhere on the "cell", the expanded area is displayed and the chevron points up. The expanded content background is white or grey, depending on what suits the situation best.
Let's say the user is interested in opening an account. The information about the account can be divided into categories such as “About”, “How do I open an account” and “Terms and conditions”. With the accordion, the user gets a quick overview of the information and can decide what header "cell" to expand to read more.
Measurements for desktop
Measurements for mobile
States for desktop
States for mobile