In ijlyttle/bsplus: Adds Functionality to the R Markdown + Shiny Bootstrap Framework

library("htmltools")
library("bsplus")

An accordion-sidebar can be useful to provide another dimension for your shiny apps. For example, you can use shiny navbarPage() for major groupings, then bs_accordion_sidebar() panels for minor groupings within each major grouping.

There are three functions in this family:

• bs_accordion_sidebar(), used to establish the accordion-sidebar framework
• bs_append(), used to add a side panel (title_side and content_side) and a main panel (content_main) to the accordion sidebar
• bs_set_opts(), used to set options for the panel-sets to follow

The bs_accordion_sidebar() function is used to instantiate the accordion sidebar. Its argument, are a unique id, Boostrap column-specifications spec_side and spec_main, and an indication of the relative position of the side panel to the main panel.

To add a panel set to an accordion sidebar, use the bs_append() function. Its arguments are the tag of the accordion sidebar, the title_side of the side panel, which will generally be text, the content_side of the side panel, which can be HTML (might be shiny inputs), and the content_main of the main panel, which can also be HTML (might be shiny outputs).

The appearance of panel sets can be modified using the bs_set_opts() function. Its first argument is the accordion sidebar tag, its other arguments are panel_type_active and panel_type_inactive, which control the appearance of following panels, and use_main_enclosure, which, if TRUE, encloses the content of the main panel in an HTML <panel/>.

The default panel_type_active is "success", for panel_type_inactive it is "primary", the default for use_main_enclosure is TRUE.

All of these functions return an accordion tag; thus, you can build an accordion sidebar using a pipe.

bs_accordion_sidebar(id = "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"
  ) %>%
  bs_append(
    title_side = "George Harrison", 
    content_side = "Lead guitar, vocals",
    content_main = "While My Guitar Gently Weeps"
  ) %>%
  bs_append(
    title_side = "Ringo Starr", 
    content_side = "Drums, vocals",
    content_main = "Don't Pass Me By"
  ) 

As you can see, the sidebar acts like a bs_accordion(), but there are a couple of important differences. First, a sidebar panel's class changes according to its being open or not. Second, the state (show-hide) of each component's main panel is determined by the state of its side panel.

When showing him a preview of this work, Carson Sievert asked a crazy question, "can you nest those things?" Well, apparently you can.

Note that the outer accordion-sidebar has use_main_enclosure set to FALSE, while each inner accordion-sidebar has it set to TRUE.

bs_accordion_sidebar(id = "the_beatles") %>%
  bs_set_opts(use_main_enclosure = FALSE) %>%
  bs_append(
    title_side = "John Lennon", 
    content_side = NULL,
    content_main = 
      bs_accordion_sidebar(id = "john") %>%
      bs_append(
        title_side = "Beatles",
        content_side = "1960-1969",
        content_main = "Help!"
      ) %>%
      bs_append(
        title_side = "Solo",
        content_side = "1968-1980",
        content_main = "Love"
      )
  ) %>%
  bs_append(
    title_side = "Paul McCartney", 
    content_side = NULL,
    content_main =
      bs_accordion_sidebar(id = "paul") %>%
      bs_append(
        title_side = "Beatles",
        content_side = "1960-1970",
        content_main = "Yesterday"
      ) %>%
      bs_append(
        title_side = "Solo",
        content_side = "1970-",
        content_main = "Maybe I'm Amazed"
      )
  ) %>%
  bs_append(
    title_side = "George Harrison", 
    content_side = NULL,
    content_main = 
      bs_accordion_sidebar(id = "george") %>%
      bs_append(
        title_side = "Beatles",
        content_side = "1960-1970",
        content_main = "Here Comes the Sun"
      ) %>%
      bs_append(
        title_side = "Solo",
        content_side = "1968-2001",
        content_main = "My Sweet Lord"
      )
  ) %>%
  bs_append(
    title_side = "Ringo Starr", 
    content_side = NULL,
    content_main = 
      bs_accordion_sidebar(id = "ringo") %>%
      bs_append(
        title_side = "Beatles",
        content_side = "1962-1970",
        content_main = "Octopus' Garden"
      ) %>%
      bs_append(
        title_side = "Solo",
        content_side = "1970-",
        content_main = "Photograph"
      )
  ) 

To use an accordion sidebar, you will need to insert some JavaScript code into your page using the use_bs_accordion_sidebar() function. You will have to do this only once per page; I have found that it works best to include after all of the accordion-sidebars are defined, perhaps as one of the last elements in a shiny UI.

use_bs_accordion_sidebar()

ijlyttle/bsplus documentation built on June 13, 2025, 1:54 p.m.