On this page
Accordions
Create collapsible content panels with and without header. Recommended default interaction for open accordion to close on new selection. Optional to have all closed on page load or have first position open on page load. Please see the official Bootstrap documentation for a full list of options.
On this page
Do:
- Use to reveal lower priority information that users don't need to see all the time
-
Use class
.left-arrowto produce an expand/collapse arrow on the left and.right-arrowto produce it on the right - Optionally, add subheading text, secondary subheading text or an icon as shown in the examples below
Don't:
- Hide error messages or critical information that may need an immediate action
- Use the optional right side text or icon along with a right arrow
Accordion header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Always open accordion
Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
Accordion header
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ut. Natus minima veniam voluptatibus quibusdam atque rerum beatae itaque nulla quidem, architecto numquam dolorem consequuntur asperiores iusto. Perspiciatis, quis unde.
Ab Hadley
Looking good Dianna! I like the image grid on the left, but it feels like a lot to process and doesn't really show me what the product does? I think using a short looping video or something similar demo'ing the product might be better?