Accordion
https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example
Attributes (accordions)
| Attribute | Values | Data type | Default | Description |
|---|---|---|---|---|
| style | primary, secondary, success, danger, warning, info, light, dark | string | primary | Element styling |
| id | myAccordion | string | ID to control | |
| class | custom | string | Add custom class |
Attributes (accordion)
| Attribute | Values | Data type | Default | Description |
|---|---|---|---|---|
| style | primary, secondary, success, danger, warning, info, light, dark | string | primary | Element styling |
| id | myAccordion_1 | string | ID to control | |
| headline | custom | string | Headline text | |
| expanded | true, false | bool | Should the accordion be expanded by default | |
| parent | myAccordion | string | Define a parent accordion by its id to greate a accordion group | |
| class | custom | string | Add custom class |
Examples
[pastacode lang=“php“ manual=“%5Baccordions%20id%3D%22accordions%22%5D%0A%5Baccordion%20id%3D%22accordion_1%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Faccordion%5D%0A%5Baccordion%20id%3D%22accordion_2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Faccordion%5D%0A%5Baccordion%20id%3D%22accordion_3%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Faccordion%5D%0A%5B%2Faccordions%5D“ message=““ highlight=““ provider=“manual“/]
Parent
[pastacode lang=“php“ manual=“%5Baccordions%20id%3D%22accordions2%22%5D%0A%5Baccordion%20id%3D%22accordion_4%22%20parent%3D%22accordions2%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Faccordion%5D%0A%5Baccordion%20id%3D%22accordion_5%22%20parent%3D%22accordions2%22%20headline%3D%22Dolor%20sit%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%20%5B%2Faccordion%5D%0A%5Baccordion%20id%3D%22accordion_6%22%20parent%3D%22accordions2%22%20headline%3D%22Amet%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Faccordion%5D%0A%5B%2Faccordions%5D“ message=““ highlight=““ provider=“manual“/]
Just one accordion
[pastacode lang=“php“ manual=“%5Baccordion%20id%3D%22accordion%22%20headline%3D%22Lorem%20Ipsum%22%20expanded%3D%22true%22%5DLorem%20ipsum%20dolor%20sit%20amet%2C%20%3Ca%20href%3D%22%23%22%3Econsetetur%3C%2Fa%3E%20sadipscing%20elitr%2C%20sed%20diam%20nonumy%20eirmod%20tempor%20invidunt%20ut%20labore%20et%20dolore%20magna%20aliquyamvoluptua.%5B%2Faccordion%5D“ message=““ highlight=““ provider=“manual“/]