Accordion-sidebar panel-group

Combines Bootstrap accordion with the functionality of shiny::[sidebarLayout][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")
)

use_bs_accordion_sidebar()

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

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

Arguments

id

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

spec_side

numeric, column specification for sidebar panels

spec_main

numeric, column specification for main panels

position

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

tag

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

title_side

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

content_side

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

content_main

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

...

other arguments (not used)

panel_type_active

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

panel_type_inactive

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

use_main_enclosure

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

Value

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

Details

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][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.

Examples

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>
if (FALSE) {
use_bs_accordion_sidebar()
}