R: Display/hide an element

visibilityFuncs {shinyjs} | R Documentation

## 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.
`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())`.

### Usage

    show(id, anim, animType, time, selector)

    showElement(id, anim, animType, time, selector)

    hide(id, anim, animType, time, selector)

    hideElement(id, anim, animType, time, selector)

    toggle(id, anim, animType, time, selector, condition)

    toggleElement(id, anim, animType, time, selector, condition)

### Arguments

`id` | The id of the element/Shiny tag
`anim` | If `TRUE` then animate the behaviour (default: `FALSE`)
`animType` | The type of animation to use, either `"slide"` or `"fade"` (default: `"slide"`)
`time` | The number of seconds to make the animation last (default: `0.5`)
`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"`
`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

`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")
          })
        }
      )
    }
    ## Not run:
      # 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)

    ## End(Not run)

    ## 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)
          })
        }
      )
    }

[Package shinyjs version 0.9 Index]