Display/hide an element

Display or hide an HTML element.

show makes an element visible, hide makes an element invisible, toggle displays the element if it it hidden and hides it if it is visible.

showElement, hideElement, and toggleElement are synonyms that may be safer to use if you're working with S4 classes (since they don't mask any existing S4 functions).

If condition is given to toggle, that condition will be used to determine if to show or hide the element. The element will be shown if the condition evaluates to TRUE and hidden otherwise. If you find yourself writing code such as if (test()) show(id) else hide(id) then you can use toggle instead: toggle(id = id, condition = test()).

show(
  id = NULL,
  anim = FALSE,
  animType = "slide",
  time = 0.5,
  selector = NULL,
  asis = FALSE
)

showElement(
  id = NULL,
  anim = FALSE,
  animType = "slide",
  time = 0.5,
  selector = NULL,
  asis = FALSE
)

hide(
  id = NULL,
  anim = FALSE,
  animType = "slide",
  time = 0.5,
  selector = NULL,
  asis = FALSE
)

hideElement(
  id = NULL,
  anim = FALSE,
  animType = "slide",
  time = 0.5,
  selector = NULL,
  asis = FALSE
)

toggle(
  id = NULL,
  anim = FALSE,
  animType = "slide",
  time = 0.5,
  selector = NULL,
  condition = NULL,
  asis = FALSE
)

toggleElement(
  id = NULL,
  anim = FALSE,
  animType = "slide",
  time = 0.5,
  selector = NULL,
  condition = NULL,
  asis = FALSE
)

Arguments

id

The id of the element/Shiny tag

anim

If TRUE then animate the behaviour

animType

The type of animation to use, either "slide" or "fade"

time

The number of seconds to make the animation last

selector

JQuery selector of the elements to show/hide. Ignored if the id argument is given. For example, to select all span elements with class x, use selector = "span.x"

asis

If TRUE, use the ID as-is even when inside a module (instead of adding the namespace prefix to the ID).

condition

An optional argument to toggle, see 'Details' below.

Details

If you want to hide/show an element in a few seconds rather than immediately, you can use the delay function.

Note

If you use S4 classes, you should be aware of the fact that both S4 and shinyjs use the show() function. This means that when using S4, it is recommended to use showElement() from shinyjs, and to use methods::show() for S4 object.

shinyjs must be initialized with a call to useShinyjs() in the app's ui.

See also

useShinyjs, runExample, hidden, delay

Examples

if (interactive()) {
  library(shiny)

  shinyApp(
    ui = fluidPage(
      useShinyjs(),  # Set up shinyjs
      actionButton("btn", "Click me"),
      textInput("text", "Text")
    ),
    server = function(input, output) {
      observeEvent(input$btn, {
        # Change the following line for more examples
        toggle("text")
      })
    }
  )
}
if (FALSE) {
  # The shinyjs function call in the above app can be replaced by
  # any of the following examples to produce similar Shiny apps
  toggle(id = "text")
  delay(1000, toggle(id = "text")) # toggle in 1 second
  toggle("text", TRUE)
  toggle("text", TRUE, "fade", 2)
  toggle(id = "text", time = 1, anim = TRUE, animType = "slide")
  show("text")
  show(id = "text", anim = TRUE)
  hide("text")
  hide(id = "text", anim = TRUE)
}

## toggle can be given an optional `condition` argument, which
## determines if to show or hide the element
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      useShinyjs(),
      checkboxInput("checkbox", "Show the text", TRUE),
      p(id = "element", "Watch what happens to me")
    ),
    server = function(input, output) {
      observe({
        toggle(id = "element", condition = input$checkbox)
      })
    }
  )
}