updateCollapse() can't switch style with mycustomstyle in Shiny

Question

I can change the panel style in ("success", "info", "danger" ...) randomly, but once I change it to my customized style, I can't change it anymore

if updateCollapse() can't work, I'm also looking for other solutions, I've tried using shinyjs::addClass(), but it seems that the panel in bsCollapse does not have an id

library(shiny)
library(shinyBS)

shinyApp(
    ui <- fluidPage(
        tags$head(tags$style(
            "
            .panel-custom {
            border-color: #d6e9c6;
            }
            .panel-custom .panel-heading {
            color: #3c763d;
            background-color: yellow;
            border-color: #d6e9c6;
            display: flex;
            justify-content: space-between;
            align-items: center;
            }
            .panel-custom .panel-heading::after {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #ff0000;
            }
            "
        )),
        bsCollapse(id = "bs", open = "panel1",
            bsCollapsePanel("panel1",
                actionButton("success", "success"),
                actionButton("info", "info"),
                actionButton("warning", "warning"),
                actionButton("danger", "danger"),
                br(),
                actionButton("custom", "custom")
            )
        )
    ),
    server <- function(input, output, session) {
        observeEvent(input$success, {
            updateCollapse(session, "bs", style = list("panel1" = "success"))
        })
        observeEvent(input$info, {
            updateCollapse(session, "bs", style = list("panel1" = "info"))
        })
        observeEvent(input$warning, {
            updateCollapse(session, "bs", style = list("panel1" = "warning"))
        })
        observeEvent(input$danger, {
            updateCollapse(session, "bs", style = list("panel1" = "danger"))
        })
        observeEvent(input$custom, {
            updateCollapse(session, "bs", style = list("panel1" = "custom"))
        })
    }
)

Answer 1

I've seen that panel-custom class was not removed when you click on yours non custom buttons.

So I've removed this class on all non custom buttons.

So you have to add to your code:

• at the beginning of ui side : shinyjs::useShinyjs()

  • This function must be called from a Shiny app's UI in order for all other shinyjs functions to work.

• In the declaration of css : tags$style(type = "text/css",HTML(. Note mostly HTML() (for example css > become > without HTML())
• inside every non custom buttons (server side) shinyjs::removeClass(id=NULL, selector = "#bs .panel", class = "panel-custom"). Note id=NULL is mandatory if you want css selector works.
• the panel has no id but if you have more than one you should use CSS :nth-child() Selector

library(shiny)
library(shinyBS)
library(shinyjs)

shinyApp(
  ui <- fluidPage(
    shinyjs::useShinyjs(),
    tags$head(tags$style(type = "text/css",HTML(
      "
            .panel-custom {
              border-color: #d6e9c6;
            }
            .panel-custom .panel-heading {
              color: #3c763d;
              background-color: yellow;
              border-color: #d6e9c6;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .panel-custom .panel-heading::after {
              content: '';
              display: inline-block;
              width: 16px;
              height: 16px;
              border-radius: 50%;
             background-color: #ff0000;
            }
            ")
    )),
    
    
    bsCollapse(id = "bs", open = "panel1",
               bsCollapsePanel("panel1",
                               actionButton("success", "success"),
                               actionButton("info", "info"),
                               actionButton("warning", "warning"),
                               actionButton("danger", "danger"),
                               br(),
                               actionButton("custom", "custom")
               )
    )
    
  ),
  server <- function(input, output, session) {
    observeEvent(input$success, { 
      
      shinyjs::removeClass(id=NULL,selector = "#bs .panel", class = "panel-custom")
      updateCollapse(session, "bs", style = list("panel1" = "success"))
    })
    observeEvent(input$info, {
      shinyjs::removeClass(id=NULL,selector = "#bs .panel", class = "panel-custom")
      updateCollapse(session, "bs", style = list("panel1" = "info"))
    })
    observeEvent(input$warning, {
      shinyjs::removeClass(id=NULL,selector = "#bs .panel", class = "panel-custom")
      updateCollapse(session, "bs", style = list("panel1" = "warning"))
    })
    observeEvent(input$danger, {
      shinyjs::removeClass(id=NULL,selector = "#bs .panel", class = "panel-custom")
      updateCollapse(session, "bs", style = list("panel1" = "danger"))
    })
    observeEvent(input$custom, {
      updateCollapse(session, "bs", style = list("panel1" = "custom"))
    })
  }
)