Accordions
The Accordion is a container that can show big
amounts of information in a small space, as it is able to be collapsed and
expanded by sections, mostly conformed by text. The only content that is
always visible is the header, that will give the user a hint on the content
each section hides.
Use Case
- As long as the content on a screen can be broken down into sections and the user will focus more on one section than another.
This is the first item's accordion body.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem
veritatis consectetur sit eius fuga magni itaque suscipit nam
laborum, perferendis molestias, repudiandae, explicabo quas id
officiis architecto neque exercitationem ullam.
This is the second item's accordion body.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem
veritatis consectetur sit eius fuga magni itaque suscipit nam
laborum, perferendis molestias, repudiandae, explicabo quas id
officiis architecto neque exercitationem ullam.
This is the third item's accordion body.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Autem
veritatis consectetur sit eius fuga magni itaque suscipit nam
laborum, perferendis molestias, repudiandae, explicabo quas id
officiis architecto neque exercitationem ullam.
| Name | Phone # | Address | Leads | Opportunities | Status | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alice Smith | (123)456-7890 | alice.smith@example.com | 123 Main St, Anytown, Anystate 12345 | 200 | 20 | Inactive | |||||||
| Bob Johnson | (234)567-8901 | bob.johnson@example.com | 456 Oak St, Othertown, Otherstate 23456 | 150 | 15 | Active | |||||||
| Charlie Davis | (345)678-9012 | charlie.davis@example.com | 789 Pine St, Thistown, Thisstate 34567 | 180 | 18 | Inactive |
| Name | Company | Earnings | Met Goal | Stocks | Position | Status | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Alice Smith | Company A | $120,000 | Yes | 200 | Manager | Active | |||||||
| Bob Johnson | Company B | $150,000 | No | 150 | Director | Inactive | |||||||
| Charlie Davis | Company C | $180,000 | Yes | 180 | CEO | Active |
| Name | Favorite Book | Favorite Movie | Hobby | Favorite Cuisine | Travel Destination | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Alice Smith | "To Kill a Mockingbird" | "The Shawshank Redemption" | Photography | Italian | Paris, France | ||||||
| Bob Johnson | "1984" | "The Godfather" | Golf | Mexican | Tokyo, Japan | ||||||
| Charlie Davis | "The Great Gatsby" | "Pulp Fiction" | Painting | Thai | Rome, Italy |
HTML
How to use the accordions
- In order to show/hide the accordion content on demand, it must have the attribute data-bs-toggle="collapse".
- In addition, this button should also have the data-bs-target attribute set to the ID of the respective accordion collapse.
- The accordion-collapse element needs to have the attribute data-bs-parent set to the ID of the current .accordion div that it belongs to.
Do's & Dont's
Keep headers short, whenever possible
The Accordion is able to support long texts as headers for each
section. However, is always advised as a good practice, to keep
naming short, in order to provide a fast way for the user to
identify the content reviewed.
Define if a section will be shown by
default
Depending on business needs, the accordion can show one of the
sections expanded or all of them collapsed.
If you come across the first scenario, define the section to be expanded relying on what most be likely chosen by the user (most relevant, newer or older entries, etcetera).
If you come across the first scenario, define the section to be expanded relying on what most be likely chosen by the user (most relevant, newer or older entries, etcetera).
A container mostly for texts
There are two main types of content shown on an accordion: body text
and tables.
As you know, both of them are text-based components and they can include other items just as links or small supportive icons but, in general it is advised to avoid including images or other type or content or nested interactions.
As you know, both of them are text-based components and they can include other items just as links or small supportive icons but, in general it is advised to avoid including images or other type or content or nested interactions.
Alternative and Related components
