Collapse absolutePanel in shiny?

Question

Following the example of superZip (http://shiny.rstudio.com/gallery/superzip-example.html), is it possible to create a collapse absoltePanel in shiny which is collapse into right, bottom corner, in case there are lots of controls and outputs.

Thanks for any suggestions.

This is a minimum example for absolutePanel:

library(shiny)

ui <- shinyUI(bootstrapPage(
    absolutePanel(
        id = "controls", class = "panel panel-default", fixed = TRUE,
        draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
        width = 330, height = "auto",
        checkboxInput('input_draw_point', 'Draw point', FALSE ),
        verbatimTextOutput('summary'))
))

server <- shinyServer(function(input, output, session) {
    output$summary <- renderPrint(print(cars))

})

shinyApp(ui = ui, server = server)

Answer 1

Bootstrap has the ability to create collapse panel. But I am not sure this is the best method:

library(shiny)

ui <- shinyUI(bootstrapPage(
    absolutePanel(
        id = "controls", class = "panel panel-default", fixed = TRUE,
        draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
        width = 330, height = "auto",
        HTML('<button data-toggle="collapse" data-target="#demo">Collapsible</button>'),
        tags$div(id = 'demo',  class="collapse",
        checkboxInput('input_draw_point', 'Draw point', FALSE ),
        verbatimTextOutput('summary')))
))

server <- shinyServer(function(input, output, session) {
    output$summary <- renderPrint(print(cars))

})

shinyApp(ui = ui, server = server)

Answer 2

Here is an example that also uses the built in shiny controls (to keep things more visually consistent if you are using defaults).

If you don't set the width/height of the absolutePanel (or fixedPanel if you like) then when you collapse it, it will disappear. This only applies if you leave the button in the div, if you put the button outside the div the panel will disappear anyway, and give you more (pretty) control over the size.

library(shiny)

ui = fillPage(

  absolutePanel(
    top = 90, left = 10,
    tags$div(id = 'plotDiv',  class="collapse", style='background-color: #eaf2f8',
             checkboxInput('input_draw_point', 'Draw point', FALSE ),
             verbatimTextOutput('summary'))),

  fixedPanel(top = 10, left = 165,
             actionButton('plotBtn', 'Show Panel', "data-toggle"='collapse', "data-target"='#plotDiv',
                          style="opacity: .80; color: #fff; background-color: #a662e3; border-color: #a153e5"))

)

server <- shinyServer(function(input, output, session) {
  output$summary <- renderPrint(print(cars))

})

shinyApp(ui = ui, server = server)

However, there are drawbacks, when the panel is hidden you cannot click on anything beneath where the panel was, in this example a map. Even though you cannot see it. If you'd like a better solution one can try shinyjs:

library(shiny)
library(shinyjs)

ui = fillPage(
  useShinyjs(),  # Set up shinyjs

  hidden( #start as hidden
    absolutePanel(
      id = 'thePanel', style='background-color: #eaf2f8',
      top = 90, left = 10,
      checkboxInput('input_draw_point', 'Draw point', FALSE ),
      verbatimTextOutput('summary')))
  ),

  fixedPanel(top = 10, left = 165,
             actionButton('plotBtn', 'Show Panel',
                          style="opacity: .80; color: #fff; background-color: #a662e3; border-color: #a153e5"))
)

server <- shinyServer(function(input, output, session) {
  output$summary <- renderPrint(print(cars))

  observeEvent(input$plotBtn, {
    toggle('thePanel')
  })

})

shinyApp(ui = ui, server = server)

Which seems far more straightforward to me, and does not block mouse clicks when the object is hidden.