Accordion

Note : This is a modification of the Bootstrap 5 Component . visit Bootstrap 5 for more complete documentation 💗

Default

Click the accordions below to expand/collapse the accordion content.

  • add the .show class on the .accordion-collapse element.
  • drop the .collapsed class from the .accordion-button element and set its aria-expanded attribute to true.

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
Flush

Add .accordion-flush to remove some borders and rounded corners to render accordions edge-to-edge with their parent container.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
Accordion With Image

CAT

A cat is a small, carnivorous mammal that is a member of the Felidae family. Domesticated cats (Felis catus) are known for their agile bodies, retractable claws, and keen hunting instincts. Cats have been companions to humans for thousands of years, valued for their ability to control pests and for their affectionate nature. They are typically independent creatures, capable of grooming and entertaining themselves. Cats have sharp senses, particularly their vision and hearing, making them skilled hunters. They communicate through a variety of vocalizations, body language, and scent markings.

FOX

They are known for their cunning nature and adaptability, often thriving in both wild and urban environments. Foxes have a keen sense of smell and hearing, which they use to hunt small animals, birds, and insects. The most common and widespread species is the red fox (Vulpes vulpes), which has a reddish-brown coat and white underbelly.

Rabbit

A rabbit is a small, herbivorous mammal in the family Leporidae. Rabbits are known for their long ears, powerful hind legs, and short fluffy tails. They are social animals that often live in groups, inhabiting a variety of environments such as meadows, forests, and grasslands. Rabbits are prolific breeders and have a gestation period of around 30 days. They primarily feed on grass, vegetables, and other plant material. Wild rabbits are often prey for a variety of predators, which has led them to develop strong escape behaviors, including zigzag running and rapid burrowing. The domestic rabbit (Oryctolagus cuniculus) is a popular pet and is also raised for meat and fur.