Can you use shinyjs to hide/show whole panels?

2
votes

I'm wondering if it would be possible to use the shinyjs hide and show functions on an entire shiny wellPanel? I'm interested in doing so to conditionally show one of two panels and from what I can tell I cannot use a reactive value in the condtional for a conditionalPanel.

Below is an example of what I have in mind, however I cannot figure out how to refer to the id given to the well panels in the shinyjs functions. 

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  actionButton("test", label = "test"),
  shinyjs::hidden(wellPanel(id = "panelA", "I AM PANEL A")),
  wellPanel(id="panelB", "I AM PANEL B")
)

sever <- function(input,output){
  observeEvent(input$test, {
    shinyjs::showElement(id= "panelA")
    shinyjs::hideElement(id= "panelB")
  })
}

shinyApp(ui=ui,server=server)
2
rshinyshinyjs
The only problem I found in your code is you use sever instead of server. After changing it, everything works as expected. - Geovany

2 Answers

3
votes
library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  actionButton("showA", label = "Show A"),
  actionButton("showB", label = "Show B"),
  shinyjs::hidden(wellPanel(id = "panelA", "I AM PANEL A")),
  wellPanel(id="panelB", "I AM PANEL B")
)

server <- function(input,output){
  observeEvent(input$showA, {
    shinyjs::showElement(id= "panelA")
    shinyjs::hideElement(id= "panelB")
  })

  observeEvent(input$showB, {
    shinyjs::showElement(id= "panelB")
    shinyjs::hideElement(id= "panelA")
  })
}

shinyApp(ui=ui,server=server)
0
votes

As Geovany commented, you misspelled server as sever. Also, you might want to use the toggle function from shinyjs.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  actionButton("test", label = "test"),
  shinyjs::hidden(wellPanel(id = "panelA", "I AM PANEL A")),
  wellPanel(id="panelB", "I AM PANEL B")
)

server <- function(input,output){
  observeEvent(input$test, {
    shinyjs::toggle(id= "panelA")
    shinyjs::toggle(id= "panelB")
  })
}

shinyApp(ui=ui,server=server)

Hope this helps.