Is there a way to update the colour of a accordion panel without changing anything else in it?

[udurraniAtPresage]

The documentation on accordions says:

.. Named arguments become attributes on the ⁠<div class="accordion">⁠ element. Unnamed arguments should be accordion_panel()s.

I tried the following by providing the style argument, but it did not change the colour, instead it replaced the button with the literal style value.

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(version = 5),
  accordion(
    id = "accordion",
    accordion_panel(
      "Panel 1",
      actionButton("saveBtn1", "Save")
    ),
    accordion_panel(
      "Panel 2",
      actionButton("saveBtn2", "Save")
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$saveBtn1, {
    accordion_panel_update("accordion", "Panel 1", style = "background-color: green;")
  })

  observeEvent(input$saveBtn2, {
    accordion_panel_update("accordion", "Panel 2", style = "background-color: green;")
  })
}

shinyApp(ui, server)

[gadenbuie]

Hi @udurraniAtPresage, thanks for the question! Unfortunately, accordion_panel_set() can currently only update the contents of a panel and not attributes. We'll certainly consider adding that feature in the future, but for now I've updated the documentation of accordion_panel_set() in #989 to reflect that ... are the unnamed child elements that will become the panel content.

[udurraniAtPresage]

Thanks. Do you have any suggestions for updating the panel colour? I guess I need to use a javascript function to update css. But please share if you have any other ideas.

[gadenbuie]

Here's another idea: instead of updating the panel color, you can add an icon to the completed panels. Here's an app with that behavior (try it on shinylive), and it also moves from Panel 1 to Panel 2 when you complete the first panel:

library(shiny)
library(bslib)

ui <- fluidPage(
  theme = bs_theme(version = 5),
  accordion(
    id = "accordion",
    accordion_panel(
      "Panel 1",
      actionButton("saveBtn1", "Save")
    ),
    accordion_panel(
      "Panel 2",
      actionButton("saveBtn2", "Save")
    )
  )
)

server <- function(input, output, session) {
  icon_success <- bsicons::bs_icon("check-circle-fill", class="text-success", title = "Completed")
    
  observeEvent(input$saveBtn1, {
    accordion_panel_update("accordion", "Panel 1", icon = icon_success)
    accordion_panel_set("accordion", "Panel 2")
  })

  observeEvent(input$saveBtn2, {
    accordion_panel_update("accordion", "Panel 2", icon = icon_success)
  })
}

shinyApp(ui, server)

[udurraniAtPresage]

This is neat! Thank you.