Accordion Demo

First collapsible section body content

Second collapsible section body content

Third collapsible section body content

Color Scheme

Edit and save this page to try other color schemes. The code block will be updated with the color scheme you choose.

Edit Panel Color Scheme (currently %%form_raw{theme}%%)

Insider Tip!

We now have undocumented support for user-defined IDs, which makes working with Bootstrap a lot easier! We can use IDs with [[div]], [[span]], [[table]], [[ul]] and [[ol]] tags. Currently, the parser prefixes all user-defined IDs with "u-" when the HTML for the page is rendered. To reference a user-defined ID in your code using, for example, href=, you must add the prefix in order to get the results you expect. Examine the code below to see how this works.

I have suggested that the parser ignores adding the prefix if we add it ourselves or that it is required that we add the prefix and have an error message displayed if the prefix isn't included when we add our user-defined IDs. That would make our code easier to read and understand.

You can use this code as a template for your own accordion group of panels.

The Code (for panel-%%form_raw{theme}%%)

[!-- Begin Accordion Panel --]
[[div class="panel-group" id="accordion"]] [!-- Accordian parent container ]

[!-- replace 'warning' with other options like 'primary, 'success', 'info' or 'danger' to easily use other color schemes --]
[[div class="panel panel-%%form_raw{theme}%%"]] [!-- Start first section --]

[[div class="panel-heading"]]
[[div class="panel-title panel-title-text"]]
++++ [[a data-toggle="collapse" data-parent="#u-accordion" href="#u-collapseOne"]]Collapsible Group Item #1[[/a]]
[[/div]]
[[/div]]

[!-- 'collapse in' shows this section as open by default, use 'collapse collapse' to have it closed by default--]
[[div id="collapseOne" class="panel-collapse collapse in"]]
[[div class="panel-body"]]

First collapsible section body content

[[/div]]
[[/div]]

[[/div]] [!-- End first section --]

[[div class="panel panel-%%form_raw{theme}%%"]] [!-- Start second section --]

[[div class="panel-heading"]]
[[div class="panel-title panel-title-text"]]
++++ [[a data-toggle="collapse" data-parent="#u-accordion" href="#u-collapseTwo"]]Collapsible Group Item #2[[/a]]
[[/div]]
[[/div]]

[[div id="collapseTwo" class="panel-collapse collapse"]]
[[div class="panel-body"]]

Second collapsible section body content

[[/div]]
[[/div]]

[[/div]] [!-- End second section --]

[!-- Start of collapsible panel section - copy/paste/edit this section to add more panels --] 
[[div class="panel panel-%%form_raw{theme}%%"]] [!-- Start third section --]

[[div class="panel-heading"]]
[[div class="panel-title panel-title-text"]]
++++ [[a data-toggle="collapse" data-parent="#u-accordion" href="#u-collapseThree"]]Collapsible Group Item #3[[/a]]
[[/div]]
[[/div]]

[[div id="collapseThree" class="panel-collapse collapse"]]
[[div class="panel-body"]]

Third collapsible section body content

[[/div]]
[[/div]]

[[/div]][!-- End third section --] 
[!-- End of collapsible panel section. Lather , rinse, repeat as needed to add more sections. --]

[[/div]] [!-- End Accordion Panel --]

====

[[form]]
fields:
  instructions:
    type: static
    value: "Select the theme color scheme for the panels in your accordion."
  theme:
    label: Panel Theme
    type: select
    values:
      primary: panel-primary
      success: panel-success
      info: panel-info
      warning: panel-warning
      danger: panel-danger
    default: info
[[/form]]


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License