shinyjs (version 0.0.7.0)

classFuncs: Add/remove CSS class

Description

Add or remove a CSS class from an HTML element. addClass adds a CSS class, removeClass removes a CSS class, toggleClass adds the class if it is not set and removes the class if it is already set. If condition is given to toggleClass, that condition will be used to determine if to add or remove the class. The class will be added if the condition evalutes to TRUE and removed otherwise. If you find yourself writing code such as if (test()) addClass(id, cl) else removeClass(id, cl) then you can use toggleClass instead: toggleClass(id, cl, test()). CSS is a simple way to describe how elements on a web page should be displayed (position, colour, size, etc.). You can learn the basics at http://www.w3schools.com/css/{W3Schools}.

Usage

addClass(...)

removeClass(...)

toggleClass(...)

Arguments

...

The following parameters are available: ll{ id The id of the element/Shiny tag class The CSS class to add/remove condition An

See Also

useShinyjs, runExample, inlineCSS,

Examples

if (interactive()) {
  shiny::shinyApp(
    ui = shiny::fluidPage(
      useShinyjs(),  # Set up shinyjs
      # Add a CSS class for red text colour
      inlineCSS(list(.red = "background: red")),
      shiny::actionButton("btn", "Click me"),
      shiny::p(id = "element", "Watch what happens to me")
    ),
    server = function(input, output, session) {
      shiny::observeEvent(input$btn, {
        # Change the following line for more examples
        toggleClass("element", "red")
      })
    }
  )
}
# The shinyjs function call in the above app can be replaced by
  # any of the following examples to produce similar Shiny apps
  toggleClass(class = "red", id = "element")
  addClass("element", "red")
  removeClass("element", "red")

## toggleClass can be given an optional `condition` argument, which
## determines if to add or remove the class
if (interactive()) {
  shiny::shinyApp(
    ui = shiny::fluidPage(
      useShinyjs(),
      inlineCSS(list(.red = "background: red")),
      shiny::checkboxInput("checkbox", "Make it red"),
      shiny::p(id = "element", "Watch what happens to me")
    ),
    server = function(input, output, session) {
      shiny::observe({
        toggleClass(id = "element", class = "red",
                    condition = input$checkbox)
      })
    }
  )
}