Basic Accordion
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.<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Always Open Accordion
Omit the data-bs-parentattribute on each.accordion-collapse to make accordion items stay open when another item is opened.
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.<Accordion defaultActiveKey={['0']} alwaysOpen>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Flush Accordion
Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Placeholder content for this accordion, which isintended to demonstrate the
.accordion-flush class. This is the first item's accordion body.which is intended to demonstrate the
.accordion-flush class. This is thesecond 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 defaultActiveKey="0" flush>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>Placeholder content for this accordion,
which isintended to demonstrate the <code>.accordion-flush</code> class.
This is the first {"item's"} accordion body.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>which is intended to demonstrate the <code>.accordion-flush</code> class.
This is thesecond {"item's"} accordion body. Let's imagine this being filled
with some actual content.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>Placeholder content for this accordion,
which is intended to demonstrate the <code>.accordion-flush</code> 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.Body>
</Accordion.Item>
</Accordion> Light Colors:
Primary
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.<Accordion defaultActiveKey="0" className="accordion accordion-primary">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Secondary
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.<Accordion defaultActiveKey="0" className="accordion accordion-secondary">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Solid Colors:
Primary
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.Secondary
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.<Accordion defaultActiveKey="0" className="accordion accordion-solid-secondary">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Colored Borders:
Primary
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.<Accordion defaultActiveKey="0" className="accordion accordion-border-primary accordions-items-seperate">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Success
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.<Accordion defaultActiveKey="0" className="accordion accordion-border-success accordions-items-seperate">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Left Aligned Icons
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.<Accordion defaultActiveKey="0" className="accordion accordionicon-left accordions-items-seperate">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Without Icon
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.<Accordion defaultActiveKey="0"
className="accordion accordionicon-none accordions-items-seperate">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Custom Icon Accordion
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.<Accordion defaultActiveKey="0"
className="accordion accordion-customicon1 accordions-items-seperate">
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Custom Accordion
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.<Accordion defaultActiveKey="0" className="accordion customized-accordion accordions-items-seperate">
<Accordion.Item eventKey="0" className="custom-accordion-primary">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body> <strong>This is the first {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1" className="accordion-item custom-accordion-secondary">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body><strong>This is the second {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2" className="accordion-item custom-accordion-danger">
<Accordion.Header>Accordion Item #3</Accordion.Header>
<Accordion.Body><strong>This is the third {"item's"} accordion body.</strong> 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 <code>.accordion-body</code>, though the
transition does limit overflow.
</Accordion.Body>
</Accordion.Item>
</Accordion>Example
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p className="mb-0">
<Button onClick={() => setOpenb(!openb)} aria-controls="example-collapse-text" aria-expanded={open}
href="#collapseExample" className="btn btn-primary collapsed mb-2 me-1" role="button">
Link with href</Button>
<Button onClick={() => setOpenb(!openb)} aria-controls="example-collapse-text" aria-expanded={open}
variant='' className="btn btn-secondary collapsed mb-2" type="button">
Button with data-bs-target</Button>
</p>
<Collapse in={openb}>
<div className="card card-body mb-0">
Some placeholder content for the collapse component. This panel
is
hidden by default but revealed when the user activates the
relevant
trigger.
</div>
</Collapse>Targets Collapse
<p className="mb-0">
<Button className="btn btn-primary mb-2 me-1" onClick={() => { first() }}>Toggle first element</Button>
<Button variant='' className="btn btn-success mb-2 me-1" type="button" onClick={() => { second() }}>Toggle second element</Button>
<Button variant='' className="btn btn-danger mb-2" type="button" onClick={() => { both() }}>Toggle both elements</Button>
</p>
<Row>
<div className="col m-1">
{isFirstCollapsed ? (
<div className=" multi-collapse" id="multiCollapseExample1">
<div className="card card-body mb-0">
Some placeholder content for the first collapse
component of
this multi-collapse example. This panel is hidden by
default
but revealed when the user activates the relevant
trigger.
</div>
</div>
) : null}
</div>
<div className="col m-1">
{isSecondCollapsed ? (
<div className=" multi-collapse" id="multiCollapseExample2">
<div className="card card-body mb-0">
Some placeholder content for the second collapse
component
of this multi-collapse example. This panel is hidden by
default but revealed when the user activates the
relevant
trigger.
</div>
</div>
) : null}
</div>
</Row>Horizontal Collapse
This is some placeholder content for a horizontal collapse. It'shidden by default and shown when triggered.
<p><Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open}>
Toggle width collapse</Button>
</p><div style={{ minHeight: '120px' }}>
<Collapse in={open} dimension="width">
<div id="example-collapse-text">
<Card body style={{ width: '230px' }}>This is some placeholder content for a horizontal collapse. {"It's"}
hidden by default and shown when triggered.
</Card>
</div>
</Collapse>
</div>