Create a vertically collapsing accordion

Usage

accordion(
  ...,
  id = NULL,
  open = NULL,
  multiple = TRUE,
  class = NULL,
  width = NULL,
  height = NULL
)

accordion_panel(title, ..., value = title, icon = NULL)

Arguments

...: Named arguments become attributes on the <div class="accordion"> element. Unnamed arguments should be accordion_panel()s.
id: If provided, you can use input$id in your server logic to determine which of the accordion_panel()s are currently active. The value will correspond to the accordion_panel()'s value argument.
open: A character vector of accordion_panel() values to open (i.e., show) by default. The default value of NULL will open the first accordion_panel(). Use a value of TRUE to open all (or FALSE to open none) of the items. It's only possible to open more than one panel when multiple=TRUE.
multiple: Whether multiple accordion_panel() can be open at once.
class: Additional CSS classes to include on the accordion div.
width, height: Any valid CSS unit; for example, height="100%".
title: A title to appear in the accordion_panel()'s header.
value: A character string that uniquely identifies this panel.
icon: A htmltools::tag child (e.g., bsicons::bs_icon()) which is positioned just before the title.

References

https://getbootstrap.com/docs/5.2/components/accordion/

Examples


items <- lapply(LETTERS, function(x) {
  accordion_panel(paste("Section", x), paste("Some narrative for section", x))
})

# First shown by default
accordion(!!!items)
#> <div class="container-fluid">
#>   <div id="bslib-accordion-8299" class="accordion" data-require-bs-version="5" data-require-bs-caller="accordion()">
#>     <div class="accordion-item" data-value="Section A">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8401" aria-controls="bslib-accordion-panel-8401" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section A</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8401" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section A</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section B">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8845" aria-expanded="false" aria-controls="bslib-accordion-panel-8845">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section B</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8845" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section B</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section C">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9273" aria-expanded="false" aria-controls="bslib-accordion-panel-9273">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section C</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9273" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section C</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section D">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-7969" aria-expanded="false" aria-controls="bslib-accordion-panel-7969">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section D</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-7969" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section D</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section E">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-5304" aria-expanded="false" aria-controls="bslib-accordion-panel-5304">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section E</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-5304" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section E</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section F">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4913" aria-expanded="false" aria-controls="bslib-accordion-panel-4913">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section F</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4913" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section F</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section G">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4010" aria-expanded="false" aria-controls="bslib-accordion-panel-4010">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section G</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4010" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section G</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section H">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3456" aria-expanded="false" aria-controls="bslib-accordion-panel-3456">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section H</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3456" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section H</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section I">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3513" aria-expanded="false" aria-controls="bslib-accordion-panel-3513">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section I</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3513" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section I</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section J">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6951" aria-expanded="false" aria-controls="bslib-accordion-panel-6951">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section J</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6951" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section J</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section K">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1720" aria-expanded="false" aria-controls="bslib-accordion-panel-1720">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section K</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1720" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section K</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section L">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1617" aria-expanded="false" aria-controls="bslib-accordion-panel-1617">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section L</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1617" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section L</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section M">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3278" aria-expanded="false" aria-controls="bslib-accordion-panel-3278">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section M</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3278" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section M</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section N">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3121" aria-expanded="false" aria-controls="bslib-accordion-panel-3121">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section N</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3121" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section N</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section O">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9465" aria-expanded="false" aria-controls="bslib-accordion-panel-9465">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section O</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9465" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section O</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section P">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4232" aria-expanded="false" aria-controls="bslib-accordion-panel-4232">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section P</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4232" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section P</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Q">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8153" aria-expanded="false" aria-controls="bslib-accordion-panel-8153">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Q</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8153" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Q</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section R">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6529" aria-expanded="false" aria-controls="bslib-accordion-panel-6529">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section R</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6529" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section R</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section S">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9461" aria-expanded="false" aria-controls="bslib-accordion-panel-9461">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section S</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9461" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section S</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section T">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1397" aria-expanded="false" aria-controls="bslib-accordion-panel-1397">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section T</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1397" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section T</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section U">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2832" aria-expanded="false" aria-controls="bslib-accordion-panel-2832">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section U</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2832" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section U</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section V">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2399" aria-expanded="false" aria-controls="bslib-accordion-panel-2399">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section V</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2399" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section V</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section W">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4695" aria-expanded="false" aria-controls="bslib-accordion-panel-4695">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section W</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4695" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section W</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section X">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4716" aria-expanded="false" aria-controls="bslib-accordion-panel-4716">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section X</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4716" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section X</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Y">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3117" aria-expanded="false" aria-controls="bslib-accordion-panel-3117">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Y</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3117" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Y</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Z">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3468" aria-expanded="false" aria-controls="bslib-accordion-panel-3468">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Z</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3468" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Z</div>
#>       </div>
#>     </div>
#>   </div>
#> </div>
# Nothing shown by default
accordion(!!!items, open = FALSE)
#> <div class="container-fluid">
#>   <div id="bslib-accordion-7573" class="accordion" data-require-bs-version="5" data-require-bs-caller="accordion()">
#>     <div class="accordion-item" data-value="Section A">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8401" aria-expanded="false" aria-controls="bslib-accordion-panel-8401">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section A</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8401" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section A</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section B">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8845" aria-expanded="false" aria-controls="bslib-accordion-panel-8845">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section B</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8845" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section B</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section C">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9273" aria-expanded="false" aria-controls="bslib-accordion-panel-9273">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section C</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9273" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section C</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section D">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-7969" aria-expanded="false" aria-controls="bslib-accordion-panel-7969">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section D</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-7969" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section D</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section E">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-5304" aria-expanded="false" aria-controls="bslib-accordion-panel-5304">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section E</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-5304" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section E</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section F">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4913" aria-expanded="false" aria-controls="bslib-accordion-panel-4913">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section F</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4913" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section F</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section G">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4010" aria-expanded="false" aria-controls="bslib-accordion-panel-4010">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section G</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4010" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section G</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section H">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3456" aria-expanded="false" aria-controls="bslib-accordion-panel-3456">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section H</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3456" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section H</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section I">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3513" aria-expanded="false" aria-controls="bslib-accordion-panel-3513">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section I</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3513" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section I</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section J">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6951" aria-expanded="false" aria-controls="bslib-accordion-panel-6951">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section J</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6951" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section J</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section K">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1720" aria-expanded="false" aria-controls="bslib-accordion-panel-1720">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section K</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1720" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section K</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section L">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1617" aria-expanded="false" aria-controls="bslib-accordion-panel-1617">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section L</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1617" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section L</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section M">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3278" aria-expanded="false" aria-controls="bslib-accordion-panel-3278">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section M</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3278" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section M</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section N">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3121" aria-expanded="false" aria-controls="bslib-accordion-panel-3121">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section N</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3121" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section N</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section O">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9465" aria-expanded="false" aria-controls="bslib-accordion-panel-9465">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section O</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9465" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section O</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section P">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4232" aria-expanded="false" aria-controls="bslib-accordion-panel-4232">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section P</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4232" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section P</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Q">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8153" aria-expanded="false" aria-controls="bslib-accordion-panel-8153">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Q</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8153" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Q</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section R">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6529" aria-expanded="false" aria-controls="bslib-accordion-panel-6529">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section R</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6529" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section R</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section S">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9461" aria-expanded="false" aria-controls="bslib-accordion-panel-9461">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section S</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9461" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section S</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section T">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1397" aria-expanded="false" aria-controls="bslib-accordion-panel-1397">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section T</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1397" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section T</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section U">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2832" aria-expanded="false" aria-controls="bslib-accordion-panel-2832">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section U</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2832" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section U</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section V">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2399" aria-expanded="false" aria-controls="bslib-accordion-panel-2399">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section V</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2399" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section V</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section W">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4695" aria-expanded="false" aria-controls="bslib-accordion-panel-4695">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section W</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4695" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section W</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section X">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4716" aria-expanded="false" aria-controls="bslib-accordion-panel-4716">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section X</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4716" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section X</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Y">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3117" aria-expanded="false" aria-controls="bslib-accordion-panel-3117">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Y</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3117" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Y</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Z">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3468" aria-expanded="false" aria-controls="bslib-accordion-panel-3468">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Z</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3468" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Z</div>
#>       </div>
#>     </div>
#>   </div>
#> </div>
# Everything shown by default
accordion(!!!items, open = TRUE)
#> <div class="container-fluid">
#>   <div id="bslib-accordion-4511" class="accordion" data-require-bs-version="5" data-require-bs-caller="accordion()">
#>     <div class="accordion-item" data-value="Section A">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8401" aria-controls="bslib-accordion-panel-8401" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section A</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8401" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section A</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section B">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8845" aria-controls="bslib-accordion-panel-8845" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section B</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8845" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section B</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section C">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9273" aria-controls="bslib-accordion-panel-9273" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section C</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9273" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section C</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section D">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-7969" aria-controls="bslib-accordion-panel-7969" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section D</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-7969" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section D</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section E">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-5304" aria-controls="bslib-accordion-panel-5304" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section E</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-5304" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section E</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section F">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4913" aria-controls="bslib-accordion-panel-4913" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section F</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4913" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section F</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section G">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4010" aria-controls="bslib-accordion-panel-4010" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section G</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4010" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section G</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section H">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3456" aria-controls="bslib-accordion-panel-3456" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section H</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3456" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section H</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section I">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3513" aria-controls="bslib-accordion-panel-3513" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section I</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3513" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section I</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section J">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6951" aria-controls="bslib-accordion-panel-6951" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section J</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6951" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section J</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section K">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1720" aria-controls="bslib-accordion-panel-1720" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section K</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1720" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section K</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section L">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1617" aria-controls="bslib-accordion-panel-1617" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section L</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1617" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section L</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section M">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3278" aria-controls="bslib-accordion-panel-3278" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section M</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3278" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section M</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section N">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3121" aria-controls="bslib-accordion-panel-3121" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section N</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3121" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section N</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section O">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9465" aria-controls="bslib-accordion-panel-9465" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section O</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9465" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section O</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section P">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4232" aria-controls="bslib-accordion-panel-4232" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section P</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4232" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section P</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Q">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8153" aria-controls="bslib-accordion-panel-8153" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Q</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8153" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section Q</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section R">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6529" aria-controls="bslib-accordion-panel-6529" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section R</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6529" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section R</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section S">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9461" aria-controls="bslib-accordion-panel-9461" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section S</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9461" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section S</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section T">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1397" aria-controls="bslib-accordion-panel-1397" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section T</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1397" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section T</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section U">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2832" aria-controls="bslib-accordion-panel-2832" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section U</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2832" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section U</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section V">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2399" aria-controls="bslib-accordion-panel-2399" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section V</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2399" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section V</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section W">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4695" aria-controls="bslib-accordion-panel-4695" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section W</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4695" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section W</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section X">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4716" aria-controls="bslib-accordion-panel-4716" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section X</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4716" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section X</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Y">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3117" aria-controls="bslib-accordion-panel-3117" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Y</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3117" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section Y</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Z">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3468" aria-controls="bslib-accordion-panel-3468" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Z</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3468" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section Z</div>
#>       </div>
#>     </div>
#>   </div>
#> </div>

# Show particular sections
accordion(!!!items, open = "Section B")
#> <div class="container-fluid">
#>   <div id="bslib-accordion-5000" class="accordion" data-require-bs-version="5" data-require-bs-caller="accordion()">
#>     <div class="accordion-item" data-value="Section A">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8401" aria-expanded="false" aria-controls="bslib-accordion-panel-8401">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section A</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8401" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section A</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section B">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8845" aria-controls="bslib-accordion-panel-8845" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section B</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8845" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section B</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section C">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9273" aria-expanded="false" aria-controls="bslib-accordion-panel-9273">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section C</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9273" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section C</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section D">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-7969" aria-expanded="false" aria-controls="bslib-accordion-panel-7969">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section D</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-7969" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section D</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section E">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-5304" aria-expanded="false" aria-controls="bslib-accordion-panel-5304">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section E</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-5304" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section E</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section F">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4913" aria-expanded="false" aria-controls="bslib-accordion-panel-4913">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section F</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4913" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section F</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section G">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4010" aria-expanded="false" aria-controls="bslib-accordion-panel-4010">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section G</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4010" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section G</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section H">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3456" aria-expanded="false" aria-controls="bslib-accordion-panel-3456">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section H</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3456" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section H</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section I">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3513" aria-expanded="false" aria-controls="bslib-accordion-panel-3513">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section I</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3513" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section I</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section J">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6951" aria-expanded="false" aria-controls="bslib-accordion-panel-6951">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section J</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6951" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section J</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section K">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1720" aria-expanded="false" aria-controls="bslib-accordion-panel-1720">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section K</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1720" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section K</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section L">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1617" aria-expanded="false" aria-controls="bslib-accordion-panel-1617">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section L</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1617" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section L</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section M">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3278" aria-expanded="false" aria-controls="bslib-accordion-panel-3278">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section M</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3278" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section M</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section N">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3121" aria-expanded="false" aria-controls="bslib-accordion-panel-3121">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section N</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3121" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section N</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section O">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9465" aria-expanded="false" aria-controls="bslib-accordion-panel-9465">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section O</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9465" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section O</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section P">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4232" aria-expanded="false" aria-controls="bslib-accordion-panel-4232">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section P</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4232" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section P</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Q">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8153" aria-expanded="false" aria-controls="bslib-accordion-panel-8153">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Q</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8153" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Q</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section R">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6529" aria-expanded="false" aria-controls="bslib-accordion-panel-6529">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section R</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6529" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section R</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section S">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9461" aria-expanded="false" aria-controls="bslib-accordion-panel-9461">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section S</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9461" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section S</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section T">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1397" aria-expanded="false" aria-controls="bslib-accordion-panel-1397">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section T</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1397" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section T</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section U">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2832" aria-expanded="false" aria-controls="bslib-accordion-panel-2832">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section U</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2832" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section U</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section V">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2399" aria-expanded="false" aria-controls="bslib-accordion-panel-2399">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section V</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2399" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section V</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section W">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4695" aria-expanded="false" aria-controls="bslib-accordion-panel-4695">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section W</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4695" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section W</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section X">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4716" aria-expanded="false" aria-controls="bslib-accordion-panel-4716">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section X</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4716" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section X</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Y">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3117" aria-expanded="false" aria-controls="bslib-accordion-panel-3117">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Y</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3117" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Y</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Z">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3468" aria-expanded="false" aria-controls="bslib-accordion-panel-3468">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Z</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3468" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Z</div>
#>       </div>
#>     </div>
#>   </div>
#> </div>
accordion(!!!items, open = c("Section A", "Section B"))
#> <div class="container-fluid">
#>   <div id="bslib-accordion-2761" class="accordion" data-require-bs-version="5" data-require-bs-caller="accordion()">
#>     <div class="accordion-item" data-value="Section A">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8401" aria-controls="bslib-accordion-panel-8401" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section A</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8401" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section A</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section B">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8845" aria-controls="bslib-accordion-panel-8845" aria-expanded="true">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section B</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8845" class="accordion-collapse collapse show">
#>         <div class="accordion-body">Some narrative for section B</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section C">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9273" aria-expanded="false" aria-controls="bslib-accordion-panel-9273">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section C</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9273" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section C</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section D">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-7969" aria-expanded="false" aria-controls="bslib-accordion-panel-7969">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section D</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-7969" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section D</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section E">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-5304" aria-expanded="false" aria-controls="bslib-accordion-panel-5304">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section E</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-5304" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section E</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section F">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4913" aria-expanded="false" aria-controls="bslib-accordion-panel-4913">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section F</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4913" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section F</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section G">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4010" aria-expanded="false" aria-controls="bslib-accordion-panel-4010">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section G</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4010" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section G</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section H">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3456" aria-expanded="false" aria-controls="bslib-accordion-panel-3456">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section H</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3456" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section H</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section I">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3513" aria-expanded="false" aria-controls="bslib-accordion-panel-3513">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section I</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3513" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section I</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section J">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6951" aria-expanded="false" aria-controls="bslib-accordion-panel-6951">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section J</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6951" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section J</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section K">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1720" aria-expanded="false" aria-controls="bslib-accordion-panel-1720">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section K</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1720" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section K</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section L">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1617" aria-expanded="false" aria-controls="bslib-accordion-panel-1617">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section L</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1617" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section L</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section M">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3278" aria-expanded="false" aria-controls="bslib-accordion-panel-3278">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section M</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3278" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section M</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section N">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3121" aria-expanded="false" aria-controls="bslib-accordion-panel-3121">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section N</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3121" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section N</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section O">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9465" aria-expanded="false" aria-controls="bslib-accordion-panel-9465">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section O</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9465" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section O</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section P">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4232" aria-expanded="false" aria-controls="bslib-accordion-panel-4232">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section P</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4232" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section P</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Q">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-8153" aria-expanded="false" aria-controls="bslib-accordion-panel-8153">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Q</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-8153" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Q</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section R">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-6529" aria-expanded="false" aria-controls="bslib-accordion-panel-6529">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section R</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-6529" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section R</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section S">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-9461" aria-expanded="false" aria-controls="bslib-accordion-panel-9461">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section S</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-9461" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section S</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section T">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-1397" aria-expanded="false" aria-controls="bslib-accordion-panel-1397">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section T</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-1397" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section T</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section U">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2832" aria-expanded="false" aria-controls="bslib-accordion-panel-2832">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section U</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2832" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section U</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section V">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-2399" aria-expanded="false" aria-controls="bslib-accordion-panel-2399">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section V</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-2399" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section V</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section W">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4695" aria-expanded="false" aria-controls="bslib-accordion-panel-4695">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section W</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4695" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section W</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section X">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-4716" aria-expanded="false" aria-controls="bslib-accordion-panel-4716">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section X</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-4716" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section X</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Y">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3117" aria-expanded="false" aria-controls="bslib-accordion-panel-3117">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Y</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3117" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Y</div>
#>       </div>
#>     </div>
#>     <div class="accordion-item" data-value="Section Z">
#>       <span class="accordion-header h2">
#>         <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bslib-accordion-panel-3468" aria-expanded="false" aria-controls="bslib-accordion-panel-3468">
#>           <div class="accordion-icon"></div>
#>           <div class="accordion-title">Section Z</div>
#>         </button>
#>       </span>
#>       <div id="bslib-accordion-panel-3468" class="accordion-collapse collapse">
#>         <div class="accordion-body">Some narrative for section Z</div>
#>       </div>
#>     </div>
#>   </div>
#> </div>

# Provide an id to create a shiny input binding
if (interactive()) {
  library(shiny)

  ui <- page_fluid(
    accordion(!!!items, id = "acc")
  )

  server <- function(input, output) {
    observe(print(input$acc))
  }

  shinyApp(ui, server)
}

Create a vertically collapsing accordion

Usage

Arguments

References

See also

Examples