R shinyjs shinydashboard box uncollapse on action

Question

In my shiny app, I have few boxes that are collapsed when application starts. Upon clicking on action button, calculations are run and then box should uncollapse and show results. Here is an example code that I am using, but it does not uncollapse the box. I got the code for "jscode" from here How to manually collapse a box in shiny dashboard. I believe this code was for collapsing the box upon clicking the button; I am not sure how to make it to uncollapse the box upon clicking the button.

many thanks,

Krina

ui.R

library(shiny)
library(shinyBS)
library(dplyr)
library(shinydashboard)

# javascript code to collapse box
jscode <- "
shinyjs.collapse = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
"

#Design sidebar
sidebar <- dashboardSidebar(width = 225, collapsed=F, 
                            sidebarMenu(id="tabs",
                                        menuItem("XYZ", tabName = "XYZ", selected=TRUE)))

#Design body 
body <- dashboardBody(shinyjs:::useShinyjs(), 
                      shinyjs:::extendShinyjs(text = jscode),
             tabItems(
               tabItem(tabName = "zz", 
                      fluidRow(box(actionButton('go','Go', class='btn btn-info', icon=icon('play-circle-o','fg-lg'))),
                               box(id="B1", collapsible=T, collapsed = T, status = "primary", color="blue", solidHeader = T, 
                                title="Test")))))

Header <- dashboardHeader()

#Show title and the page (includes sidebar and body)
dashboardPage(Header, sidebar, body)

server.R

library(shiny)
library(shinyBS)
library(dplyr)
library(shinydashboard)

# javascript code to collapse box
jscode <- "
shinyjs.collapse = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
"
shinyServer(function(input, output, session){

eventReactive(input$go,
              {js$collapse("B1")
              js$collapse("B2")})
})

Answer 1

You need to use observeEvent instead of eventReactive. Your code will look something like this:

library(shiny)
library(shinyBS)
library(dplyr)
library(shinydashboard)


# javascript code to collapse box
jscode <- "
shinyjs.collapse = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
"

#Design sidebar
sidebar <- dashboardSidebar(width = 225, collapsed=F, 
                            sidebarMenu(id="tabs",
                                        menuItem("zz", tabName = "zz", selected=TRUE)))

#Design body 
body <- dashboardBody(shinyjs:::useShinyjs(), 
                      shinyjs:::extendShinyjs(text = jscode),
                      tabItems(
                        tabItem(tabName = "zz", 
                                fluidRow(box(actionButton('go','Go', class='btn btn-info', icon=icon('play-circle-o','fg-lg'))),
                                         box(id="B1", collapsible=T, collapsed = T, status = "primary", color="blue", solidHeader = T, 
                                             title="Test")))))

Header <- dashboardHeader()

#Show title and the page (includes sidebar and body)
ui <- dashboardPage(Header, sidebar, body)


server <- shinyServer(function(input, output, session){

  observeEvent(input$go,{js$collapse("B1")})
})

shinyApp( ui = ui, server = server)

Hope it helps!