shinyjs (version 0.1.0)

visibilityFuncs: Display/hide an element

Description

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. 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 evalutes 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()).

Usage

show(...)

hide(...)

toggle(...)

Arguments

...

The following parameters are available: ll{ id The id of the element/Shiny tag anim If TRUE then animate the behaviour

See Also

useShinyjs, runExample, hidden

Examples

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

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