CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
Build vertically collapsing accordions in combination with our React Accordion component.
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Click the accordions below to expand/collapse the accordion content.
.accordion-body
, though the transition does limit overflow. .accordion-body
, though the transition does limit overflow. .accordion-body
, though the transition does limit overflow. 1<CAccordion activeItemKey={2}>2 <CAccordionItem itemKey={1}>3 <CAccordionHeader>Accordion Item #1</CAccordionHeader>4 <CAccordionBody>5 <strong>This is the first item's accordion body.</strong> It is hidden by default, until the6 collapse plugin adds the appropriate classes that we use to style each element. These classes7 control the overall appearance, as well as the showing and hiding via CSS transitions. You can8 modify any of this with custom CSS or overriding our default variables. It's also worth noting9 that just about any HTML can go within the <code>.accordion-body</code>, though the transition10 does limit overflow.11 </CAccordionBody>12 </CAccordionItem>13 <CAccordionItem itemKey={2}>14 <CAccordionHeader>Accordion Item #2</CAccordionHeader>15 <CAccordionBody>16 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the17 collapse plugin adds the appropriate classes that we use to style each element. These classes18 control the overall appearance, as well as the showing and hiding via CSS transitions. You can19 modify any of this with custom CSS or overriding our default variables. It's also worth noting20 that just about any HTML can go within the <code>.accordion-body</code>, though the transition21 does limit overflow.22 </CAccordionBody>23 </CAccordionItem>24 <CAccordionItem itemKey={3}>25 <CAccordionHeader>Accordion Item #3</CAccordionHeader>26 <CAccordionBody>27 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the28 collapse plugin adds the appropriate classes that we use to style each element. These classes29 control the overall appearance, as well as the showing and hiding via CSS transitions. You can30 modify any of this with custom CSS or overriding our default variables. It's also worth noting31 that just about any HTML can go within the <code>.accordion-body</code>, though the transition32 does limit overflow.33 </CAccordionBody>34 </CAccordionItem>35</CAccordion>
Add flush
to remove the default background-color
, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
.accordion-body
, though the transition does limit overflow. .accordion-body
, though the transition does limit overflow. .accordion-body
, though the transition does limit overflow. 1<CAccordion flush>2 <CAccordionItem itemKey={1}>3 <CAccordionHeader>Accordion Item #1</CAccordionHeader>4 <CAccordionBody>5 <strong>This is the first item's accordion body.</strong> It is hidden by default, until the6 collapse plugin adds the appropriate classes that we use to style each element. These classes7 control the overall appearance, as well as the showing and hiding via CSS transitions. You can8 modify any of this with custom CSS or overriding our default variables. It's also worth noting9 that just about any HTML can go within the <code>.accordion-body</code>, though the transition10 does limit overflow.11 </CAccordionBody>12 </CAccordionItem>13 <CAccordionItem itemKey={2}>14 <CAccordionHeader>Accordion Item #2</CAccordionHeader>15 <CAccordionBody>16 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the17 collapse plugin adds the appropriate classes that we use to style each element. These classes18 control the overall appearance, as well as the showing and hiding via CSS transitions. You can19 modify any of this with custom CSS or overriding our default variables. It's also worth noting20 that just about any HTML can go within the <code>.accordion-body</code>, though the transition21 does limit overflow.22 </CAccordionBody>23 </CAccordionItem>24 <CAccordionItem itemKey={3}>25 <CAccordionHeader>Accordion Item #3</CAccordionHeader>26 <CAccordionBody>27 <strong>This is the third item's accordion body.</strong> It is hidden by default, until the28 collapse plugin adds the appropriate classes that we use to style each element. These classes29 control the overall appearance, as well as the showing and hiding via CSS transitions. You can30 modify any of this with custom CSS or overriding our default variables. It's also worth noting31 that just about any HTML can go within the <code>.accordion-body</code>, though the transition32 does limit overflow.33 </CAccordionBody>34 </CAccordionItem>35</CAccordion>
Add alwaysOpen
property to make react accordion items stay open when another item is opened.
.accordion-body
, though the transition does limit overflow. .accordion-body
, though the transition does limit overflow. .accordion-body
, though the transition does limit overflow. 1<CAccordion alwaysOpen activeItemKey={2}>2 <CAccordionItem itemKey={1}>3 <CAccordionHeader>Accordion Item #1</CAccordionHeader>4 <CAccordionBody>5 <strong>This is the first item's accordion body.</strong> It is hidden by default, until the6 collapse plugin adds the appropriate classes that we use to style each element. These classes7 control the overall appearance, as well as the showing and hiding via CSS transitions. You can8 modify any of this with custom CSS or overriding our default variables. It's also worth noting9 that just about any HTML can go within the <code>.accordion-body</code>, though the transition10 does limit overflow.11 </CAccordionBody>12 </CAccordionItem>13 <CAccordionItem itemKey={2}>14 <CAccordionHeader>Accordion Item #2</CAccordionHeader>15 <CAccordionBody>16 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the17 collapse plugin adds the appropriate classes that we use to style each element. These classes18 control the overall appearance, as well as the showing and hiding via CSS transitions. You can19 modify any of this with custom CSS or overriding our default variables. It's also worth noting20 that just about any HTML can go within the <code>.accordion-body</code>, though the transition21 does limit overflow.22 </CAccordionBody>23 </CAccordionItem>24 <CAccordionItem itemKey={3}>25 <CAccordionHeader>Accordion Item #3</CAccordionHeader>26 <CAccordionBody>27 <strong>This is the second item's accordion body.</strong> It is hidden by default, until the28 collapse plugin adds the appropriate classes that we use to style each element. These classes29 control the overall appearance, as well as the showing and hiding via CSS transitions. You can30 modify any of this with custom CSS or overriding our default variables. It's also worth noting31 that just about any HTML can go within the <code>.accordion-body</code>, though the transition32 does limit overflow.33 </CAccordionBody>34 </CAccordionItem>35</CAccordion>
React accordions use local CSS variables on .accordion
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
1--cui-accordion-color: #{color-contrast($accordion-bg)};2--cui-accordion-bg: #{$accordion-bg};3--cui-accordion-transition: #{$accordion-transition};4--cui-accordion-border-color: #{$accordion-border-color};5--cui-accordion-border-width: #{$accordion-border-width};6--cui-accordion-border-radius: #{$accordion-border-radius};7--cui-accordion-inner-border-radius: #{$accordion-inner-border-radius};8--cui-accordion-btn-padding-x: #{$accordion-button-padding-x};9--cui-accordion-btn-padding-y: #{$accordion-button-padding-y};10--cui-accordion-btn-color: #{$accordion-color};11--cui-accordion-btn-bg: #{$accordion-button-bg};12--cui-accordion-btn-icon: #{escape-svg($accordion-button-icon)};13--cui-accordion-btn-icon-width: #{$accordion-icon-width};14--cui-accordion-btn-icon-transform: #{$accordion-icon-transform};15--cui-accordion-btn-icon-transition: #{$accordion-icon-transition};16--cui-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};17--cui-accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};18--cui-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};19--cui-accordion-body-padding-x: #{$accordion-body-padding-x};20--cui-accordion-body-padding-y: #{$accordion-body-padding-y};21--cui-accordion-active-color: #{$accordion-button-active-color};22--cui-accordion-active-bg: #{$accordion-button-active-bg};
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CAccordion style={vars}>...</CAccordion>
1$accordion-padding-y: 1rem;2$accordion-padding-x: 1.25rem;3$accordion-color: var(--cui-body-color);4$accordion-bg: $body-bg;5$accordion-border-width: $border-width;6$accordion-border-color: var(--cui-border-color);7$accordion-border-radius: $border-radius;8$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width);910$accordion-body-padding-y: $accordion-padding-y;11$accordion-body-padding-x: $accordion-padding-x;1213$accordion-button-padding-y: $accordion-padding-y;14$accordion-button-padding-x: $accordion-padding-x;15$accordion-button-color: $accordion-color;16$accordion-button-bg: var(--cui-accordion-bg);17$accordion-transition: $btn-transition, border-radius .15s ease;18$accordion-button-active-bg: tint-color($component-active-bg, 90%);19$accordion-button-active-color: shade-color($primary, 10%);2021$accordion-button-focus-border-color: $input-focus-border-color;22$accordion-button-focus-box-shadow: $btn-focus-box-shadow;2324$accordion-icon-width: 1.25rem;25$accordion-icon-color: $accordion-button-color;26$accordion-icon-active-color: $accordion-button-active-color;27$accordion-icon-transition: transform .2s ease-in-out;28$accordion-icon-transform: rotate(-180deg);2930$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");31$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
1import { CAccordion } from '@coreui/react'2// or3import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
Property | Description | Type | Default |
---|---|---|---|
activeItemKey | The active item key. | string | number | - |
alwaysOpen | Make accordion items stay open when another item is opened | boolean | false |
className | A string of all className you want applied to the base component. | string | - |
flush | Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. | boolean | - |
1import { CAccordionBody } from '@coreui/react'2// or3import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { CAccordionHeader } from '@coreui/react'2// or3import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
1import { CAccordionItem } from '@coreui/react'2// or3import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the base component. | string | - |
itemKey | Item key. | string | number | - |