Combines Bootstrap accordion with the functionality of shiny::sidebarLayout, allowing you to add another dimension to your shiny apps.

bs_accordion_sidebar(id, spec_side = c(width = 4, offset = 0),
  spec_main = c(width = 8, offset = 0), position = c("left", "right"))


# S3 method for bsplus_accordion_sidebar
bs_append(tag, title_side, content_side,
  content_main, ...)

# S3 method for bsplus_accordion_sidebar
  panel_type_active = "success", panel_type_inactive = "primary",
  use_main_enclosure = TRUE, ...)



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


numeric, column specification for sidebar panels


numeric, column specification for main panels


character, indicates where to put the sidebar panels with respect to the main panels


htmltools::tag, accordion-sidebar <div/> to which to append a panel


character (HTML) or htmltools::tagList, title for the sidebar panel


character (HTML) or htmltools::tagList, content for the sidebar panel


character (HTML) or htmltools::tagList, content for the main panel


other arguments (not used)


character, indicated bootstrap type for active-panel header, one of c("default", "primary", "success", "info", "warning", "danger")


character, indicated bootstrap type for inactive-panel header, one of c("default", "primary", "success", "info", "warning", "danger")


logical, indicates if main content is to be wrapped in a Bootstrap panel


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


If you use a bs_accordion_sidebar(), you will have to call the function use_bs_accordion_sidebar() somewhere in your UI. This attaches some JavaScript needed for your accordion sidebar to work properly.

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

  1. A constructor function for the accordion-sidebar, bs_accordion_sidebar()

  2. A function to set options for subsequent panels, bs_set_opts()

  3. A function to append a panel-set to an accordion-sidebar, bs_append()

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

For the constructor, bs_accordion_sidebar(), 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.


bs_accordion_sidebar(id = "meet_the_beatles") %>% bs_append( title_side = "John Lennon", content_side = "Rhythm guitar, vocals", content_main = "Dear Prudence" ) %>% bs_append( title_side = "Paul McCartney", content_side = "Bass guitar, vocals", content_main = "Blackbird" )
#> <div class="row" id="meet_the_beatles"> #> <div class="col-sm-4" id="meet_the_beatles-side"> #> <div id="meet_the_beatles-side-accordion" class="panel-group" role="tablist" aria-multiselectable="true"> #> <div class="panel panel-success" class-active="panel-success" class-inactive="panel-primary" id="meet_the_beatles-side-accordion-0"> #> <div id="meet_the_beatles-side-accordion-0-heading" class="panel-heading" role="tab" data-toggle="collapse" data-target="#meet_the_beatles-side-accordion-0-collapse" data-parent="#meet_the_beatles-side-accordion" aria-expanded="true" aria-controls="meet_the_beatles-side-accordion-0-collapse" style="cursor: pointer;"> #> <h4 class="panel-title">John Lennon</h4> #> </div> #> <div aria-labelledby="meet_the_beatles-side-accordion-0-heading" class="panel-collapse collapse in panel-collapse-leader" id="meet_the_beatles-side-accordion-0-collapse" role="tabpanel"> #> <div class="panel-body" style="">Rhythm guitar, vocals</div> #> </div> #> </div> #> <div class="panel panel-primary" class-active="panel-success" class-inactive="panel-primary" id="meet_the_beatles-side-accordion-1"> #> <div id="meet_the_beatles-side-accordion-1-heading" class="panel-heading" role="tab" data-toggle="collapse" data-target="#meet_the_beatles-side-accordion-1-collapse" data-parent="#meet_the_beatles-side-accordion" aria-expanded="true" aria-controls="meet_the_beatles-side-accordion-1-collapse" style="cursor: pointer;"> #> <h4 class="panel-title">Paul McCartney</h4> #> </div> #> <div aria-labelledby="meet_the_beatles-side-accordion-1-heading" class="panel-collapse collapse panel-collapse-leader" id="meet_the_beatles-side-accordion-1-collapse" role="tabpanel"> #> <div class="panel-body" style="">Bass guitar, vocals</div> #> </div> #> </div> #> </div> #> </div> #> <div class="col-sm-8" id="meet_the_beatles-main"> #> <div class="collapse in" id="meet_the_beatles-side-accordion-0-follow"> #> <div class="panel panel-success"> #> <div class="panel-body">Dear Prudence</div> #> </div> #> </div> #> <div class="collapse" id="meet_the_beatles-side-accordion-1-follow"> #> <div class="panel panel-success"> #> <div class="panel-body">Blackbird</div> #> </div> #> </div> #> </div> #> </div>
# NOT RUN { use_bs_accordion_sidebar() # }