Accordion panel-group

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

bs_accordion(id)

# 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, ...)

Arguments

id

character, unique id for accordion <div/>, also serves as root id for panels appended using bs_append()

tag

htmltools::[tag][htmltools::tag], accordion <div/> to which to append a panel

title

character (HTML) or htmltools::[tagList][htmltools::tagList], title for the panel heading

content

character (HTML) or htmltools::[tagList][htmltools::tagList], content for the panel body

...

other arguments (not used)

panel_type

character, one of the standard Bootstrap types c("default", "primary", "success", "info", "warning", "danger")

use_heading_link

logical, indicates whether to make the entire panel heading clickable.

Value

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

Details

All of these functions return a bsplus_accordion object (which is also an htmltools::[tag][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

https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion

Examples

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>