Add flush to remove the default
background-color, some borders, and some rounded
corners to render accordions edge-to-edge with their parent
container.
{
flushActiveKey === 1
? (flushActiveKey = 0)
: (flushActiveKey = 1);
}
"
>
Accordion Item #1
This is the first 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.
{
flushActiveKey === 2
? (flushActiveKey = 0)
: (flushActiveKey = 2);
}
"
>
Accordion Item #2
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.
{
flushActiveKey === 3
? (flushActiveKey = 0)
: (flushActiveKey = 3);
}
"
>
Accordion Item #3
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.