Bootstrap 4 accordion container

accordion creates an accordion container. Accordions are part of collapsible elements.

accordionItem is to be inserted in a accordion.

updateAccordion toggles an accordion on the client.

Usage

bs4Accordion(..., id, width = 12, .list = NULL)

bs4AccordionItem(
  ...,
  title,
  status = NULL,
  collapsed = TRUE,
  solidHeader = TRUE
)

updateAccordion(id, selected, session = shiny::getDefaultReactiveDomain())

accordion(..., id, width = 12, .list = NULL)

accordionItem(..., title, status = NULL, collapsed = TRUE, solidHeader = TRUE)

Arguments

...

slot for accordionItem.

id

Accordion to target.

width

The width of the accordion.

.list

To pass accordionItem within a list.

title

Optional title.

status

The status of the item. This determines the item's background color. Valid statuses are defined as follows:

• primary: #007bff .

• secondary: #6c757d .

• info: #17a2b8 .

• success: #28a745 .

• warning: #ffc107 .

• danger: #dc3545 .

• gray-dark: #343a40 .

• gray: #adb5bd .

• white: #fff .

• indigo: #6610f2 .

• lightblue: #3c8dbc .

• navy: #001f3f .

• purple: #605ca8 .

• fuchsia: #f012be .

• pink: #e83e8c .

• maroon: #d81b60 .

• orange: #ff851b .

• lime: #01ff70 .

• teal: #39cccc .

• olive: #3d9970 .

collapsed

If TRUE, start collapsed. This must be used with collapsible=TRUE.

solidHeader

Should the header be shown with a solid color background?

selected

Index of the newly selected accordionItem.

session

Shiny session object.

Author

David Granjon, dgranjon@ymail.com

Examples

if (interactive()) {
 library(shiny)
 library(bs4Dash)
 
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(
       id = "accordion1",
        accordionItem(
          title = "Accordion 1 Item 1",
          status = "danger",
          collapsed = TRUE,
          "This is some text!"
        ),
        accordionItem(
          title = "Accordion 1 Item 2",
          status = "indigo",
          collapsed = FALSE,
          "This is some text!"
        )
      ),
      accordion(
       id = "accordion2",
        accordionItem(
          title = "Accordion 2 Item 1",
          status = "info",
          collapsed = TRUE,
          "This is some text!"
        ),
        accordionItem(
          title = "Accordion 2 Item 2",
          status = "success",
          collapsed = FALSE,
          "This is some text!"
        )
      ),
      accordion(
        id = "accordion_dynamic",
        .list = lapply(
          1:2,
          function(i)
            accordionItem(
              title = paste('Accordion 1 Item', i),
              status = "danger",
              collapsed = ifelse (i == 1, TRUE, FALSE),
              "This is some text!"
            )
         )
       )
    ),
    title = "Accordion"
  ),
  server = function(input, output) {
   observe({
     print(input$accordion1)
     print(input$accordion2)
     print(input$accordion_dynamic)
   })
  }
 )
}


# Update accordion
if (interactive()) {
 library(shiny)
 library(bs4Dash)
 
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      radioButtons("controller", "Controller", choices = c(1, 2)),
      br(),
      accordion(
        id = "accordion1",
        accordionItem(
          title = "Accordion 1 Item 1",
          status = "danger",
          collapsed = TRUE,
          "This is some text!"
        ),
        accordionItem(
          title = "Accordion 1 Item 2",
          status = "warning",
          collapsed = TRUE,
          "This is some text!"
        )
      )
    ),
    title = "Update Accordion"
  ),
  server = function(input, output, session) {
    observeEvent(input$controller, {
      updateAccordion(id = "accordion1", selected = input$controller)
    })
    observe(print(input$accordion1))
    observeEvent(input$accordion1, {
      showNotification(sprintf("You selected accordion N° %s", input$accordion1), type = "message")
    })
  }
 )
}