CODEWITHSUNDEEP
rshinyshinydashboard
tjebo
tjebo

Reputation: 23747

shinydashboard toggle box - hide by default

This is a follow up to a previous thread. The answers give an option which shows the box by default, but how can I change it to be hidden by default? Below code a mix of both answers. 

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      useShinyjs()
    ),
    mainPanel(
      box(id = "myBox", title = "Tree Output", width = '800px',
          selectInput(inputId = "myInput", label = "my input", choices = c(letters))
      ),
      actionButton(inputId = "button", label = "show / hide")
    )
  )
)

server <- function(input, output){

  ## observe the button being pressed
  observeEvent(input$button, {
    shinyjs::toggle("myBox")
  })
}

shinyApp(ui, server)

Upvotes: 3

Views: 1087

Answers (2)

Mateus Figueiredo
Mateus Figueiredo

Reputation: 81

You can toggle the myBox. Kind of if the server clicks it for you beforehand.

server <- function(input, output){
  
  # Hide or show myBox 
  toggle("myBox")
  ## observe the button being pressed
  observeEvent(input$button, {
    shinyjs::toggle("myBox")
  })
}

Upvotes: 1

Pork Chop
Pork Chop

Reputation: 29387

You can wrap it around another div and use hidden function from shinyjs

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- fluidPage(
    sidebarLayout(
        sidebarPanel(
            useShinyjs()
        ),
        mainPanel(
            hidden(
                div(id = "mybox_wrapper",
                    box(id = "myBox", title = "Tree Output", width = '800px',
                        selectInput(inputId = "myInput", label = "my input", choices = c(letters))
                    )
                )),
            actionButton(inputId = "button", label = "show / hide")
        )
    )
)

server <- function(input, output){

    ## observe the button being pressed
    observeEvent(input$button, {
        shinyjs::toggle("mybox_wrapper")
    })
}

shinyApp(ui, server)

enter image description here

Upvotes: 4

Related Questions