EVOLUTION-MANAGER

Edit File: visibilityFuncs.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>R: Display/hide an element</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="R.css" />
</head><body>

<table width="100%" summary="page for visibilityFuncs {shinyjs}"><tr><td>visibilityFuncs {shinyjs}</td><td style="text-align: right;">R Documentation</td></tr></table>

<h2>Display/hide an element</h2>

<h3>Description</h3>

<p>Display or hide an HTML element.<br /><br />
<strong><code>show</code></strong> makes an element visible, <strong><code>hide</code></strong> makes
an element invisible, <strong><code>toggle</code></strong> displays the element if it it
hidden and hides it if it is visible.<br /><br />
<strong><code>showElement</code></strong>, <strong><code>hideElement</code></strong>, and
<strong><code>toggleElement</code></strong> are synonyms that may be safer to use if you're
working with S4 classes (since they don't mask any existing S4 functions).<br /><br />
If <code>condition</code> is given to <code>toggle</code>, that condition will be used
to determine if to show or hide the element. The element will be shown if the
condition evaluates to <code>TRUE</code> and hidden otherwise. If you find
yourself writing code such as <code>if (test()) show(id) else hide(id)</code>
then you can use <code>toggle</code> instead: <code>toggle(id = id, condition = test())</code>.
</p>

<h3>Usage</h3>

<pre>
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
)
</pre>

<h3>Arguments</h3>

<table summary="R argblock">
<tr valign="top"><td><code>id</code></td>
<td>
<p>The id of the element/Shiny tag</p>
</td></tr>
<tr valign="top"><td><code>anim</code></td>
<td>
<p>If <code>TRUE</code> then animate the behaviour</p>
</td></tr>
<tr valign="top"><td><code>animType</code></td>
<td>
<p>The type of animation to use, either <code>"slide"</code> or <code>"fade"</code></p>
</td></tr>
<tr valign="top"><td><code>time</code></td>
<td>
<p>The number of seconds to make the animation last</p>
</td></tr>
<tr valign="top"><td><code>selector</code></td>
<td>
<p>JQuery selector of the elements to show/hide. Ignored if the
<code>id</code> argument is given. For example, to select all span elements with
class x, use <code>selector = "span.x"</code></p>
</td></tr>
<tr valign="top"><td><code>asis</code></td>
<td>
<p>If <code>TRUE</code>, use the ID as-is even when inside a module
(instead of adding the namespace prefix to the ID).</p>
</td></tr>
<tr valign="top"><td><code>condition</code></td>
<td>
<p>An optional argument to <code>toggle</code>, see 'Details' below.</p>
</td></tr>
</table>

<h3>Details</h3>

<p>If you want to hide/show an element in a few seconds rather than immediately,
you can use the <code><a href="delay.html">delay</a></code> function.
</p>

<p>If you use S4 classes, you should be aware of the fact that both S4 and
<code>shinyjs</code> use the <code>show()</code> function. This means that when using S4,
it is recommended to use <code>showElement()</code> from <code>shinyjs</code>, and to
use <code>methods::show()</code> for S4 object.
</p>
<p><code>shinyjs</code> must be initialized with a call to <code>useShinyjs()</code>
in the app's ui.
</p>

<p><code><a href="useShinyjs.html">useShinyjs</a></code>,
<code><a href="runExample.html">runExample</a></code>,
<code><a href="hidden.html">hidden</a></code>,
<code><a href="delay.html">delay</a></code>
</p>

<h3>Examples</h3>

<pre>
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)
      })
    }
  )
}
</pre>

<hr /><div style="text-align: center;">[Package <em>shinyjs</em> version 2.1.0 <a href="00Index.html">Index</a>]</div>
</body></html>