An accordion is a set of collapsible panels where, at most, one panel-body is visible.


# S3 method for bsplus_accordion
bs_append(tag, title, content, ...)

# S3 method for bsplus_accordion
bs_set_opts(tag, panel_type = "primary",
  use_heading_link = TRUE, ...)


character, unique id for accordion <div/>, also serves as root id for panels appended using bs_append()
htmltools::tag, accordion <div/> to which to append a panel
character (HTML) or htmltools::tagList, title for the panel heading
character (HTML) or htmltools::tagList, content for the panel body
other args (not used)
character, one of the standard Bootstrap types c("default", "primary", "success", "info", "warning", "danger")
logical, indicates whether to make the entire panel heading clickable.


bsplus_accordion object (htmltools::tag, <div/>)


All of these functions return a bsplus_accordion object (which is also an htmltools::tag, <div/>), so you can compose an accordion by piping. There are three parts to this system:

  1. A constructor function for the accordion, bs_accordion()
  2. A function to set options for subsequent panels, bs_set_opts()
  3. A function to append a panel to the group, bs_append()

The verb append is used to signify that you can append an arbitrary number of panels to an accordion.

For the constructor, bs_accordion(), it is your responsibility to ensure that id is unique among HTML elements in your page. If you have non-unique id's, strange things may happen to your page.

See also


bs_accordion(id = "meet_the_beatles") %>% bs_set_opts(panel_type = "success", use_heading_link = TRUE) %>% bs_append(title = "John Lennon", content = "Rhythm guitar, vocals") %>% bs_set_opts(panel_type = "info") %>% bs_append(title = "Paul McCartney", content = "Bass guitar, vocals")
#> <div id="meet_the_beatles" class="panel-group" role="tablist" aria-multiselectable="true"> #> <div class="panel panel-success" id="meet_the_beatles-0"> #> <div id="meet_the_beatles-0-heading" class="panel-heading" role="tab" data-toggle="collapse" data-target="#meet_the_beatles-0-collapse" data-parent="#meet_the_beatles" aria-expanded="true" aria-controls="meet_the_beatles-0-collapse" style="cursor: pointer;"> #> <h4 class="panel-title">John Lennon</h4> #> </div> #> <div aria-labelledby="meet_the_beatles-0-heading" class="panel-collapse collapse in" id="meet_the_beatles-0-collapse" role="tabpanel"> #> <div class="panel-body" style="">Rhythm guitar, vocals</div> #> </div> #> </div> #> <div class="panel panel-info" id="meet_the_beatles-1"> #> <div id="meet_the_beatles-1-heading" class="panel-heading" role="tab" data-toggle="collapse" data-target="#meet_the_beatles-1-collapse" data-parent="#meet_the_beatles" aria-expanded="true" aria-controls="meet_the_beatles-1-collapse" style="cursor: pointer;"> #> <h4 class="panel-title">Paul McCartney</h4> #> </div> #> <div id="meet_the_beatles-1-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="meet_the_beatles-1-heading"> #> <div class="panel-body" style="">Bass guitar, vocals</div> #> </div> #> </div> #> </div>