Grocery Apex
Grocery Bevy
Grocery Eden
English
Arabic
Accordions
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.
Always Open Accordion
Omit the data-accordion="open" attribute 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.
Bordered Accordions
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 Accordion
Add .accordion-flush to remove the default
background-color,
borders, and rounded corners.
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.