shinyBS observe toggling of bsCollapsePanel

my question relates to observing the event of toggling and untoggling of the header in bsCollapsePanel in shinyBS.

Lets consider following following app as an example:

library(shiny)
library(shinyBS)
server = function(input, output, session) {
    observeEvent(input$p1Button, ({
      updateCollapse(session, "collapseExample", open = "Panel 1")
    }))
    observeEvent(input$styleSelect, ({
      updateCollapse(session, "collapseExample", style = list("Panel 1" = input$styleSelect))
    }))
    output$randomNumber <- reactive(paste0('some random number'))
  }


ui = fluidPage(
  sidebarLayout(
    sidebarPanel(HTML("This button will open Panel 1 using <code>updateCollapse</code>."),
                 actionButton("p1Button", "Push Me!"),
                 selectInput("styleSelect", "Select style for Panel 1",
                             c("default", "primary", "danger", "warning", "info", "success"))
    ),
    mainPanel(
      bsCollapse(id = "collapseExample", open = "Panel 2",
                 bsCollapsePanel("Panel 1", "This is a panel with just text ",
                                 "and has the default style. You can change the style in ",
                                 "the sidebar.", style = "info")
      ),
      verbatimTextOutput('randomNumber')
    )
  )
)

app = shinyApp(ui = ui, server = server)

I want the app to be able to print a random number (using R shiny reactivity) in the verbatimTextOutput('randomNumber') field every time I open bsCollapsePanel by clicking on Panel 1 header.

I was thinking that it may be possible using shinyjs package but have not found many examples of these two packages used together.

Solution

I am not completely sure what you want, but this might be close. These are the additions:

Added an observeEvent to monitor your Panel 1 header.
Added a reactiveValues to hold the "random number"
Incremented that value in the above observeEvent handler when Panel 1 is pushed.

Here is the code:

library(shiny)
library(shinyBS)
server = function(input, output, session) {
  rv <- reactiveValues(number=0)
  observeEvent(input$p1Button, ({
    updateCollapse(session, "collapseExample", open = "Panel 1")
  }))
  observeEvent(input$styleSelect, ({
    updateCollapse(session, "collapseExample", style = list("Panel 1" = input$styleSelect))
  }))
  observeEvent(input$collapseExample, ({
    rv$number <- rv$number+1
  }))
  output$randomNumber <- reactive(rv$number)
}


ui = fluidPage(
  sidebarLayout(
    sidebarPanel(HTML("This button will open Panel 1 using <code>updateCollapse</code>."),
                 actionButton("p1Button", "Push Me!"),
                 selectInput("styleSelect", "Select style for Panel 1",
                           c("default", "primary", "danger", "warning", "info", "success"))
    ),
    mainPanel(
      bsCollapse(id = "collapseExample", open = "Panel 2",
                 bsCollapsePanel("Panel 1", "This is a panel with just text ",
                                 "and has the default style. You can change the style in ",
                                 "the sidebar.", style = "info")
      ),
      verbatimTextOutput('randomNumber')
    )
  )
)
shinyApp(ui = ui, server = server)

And a screen shot: