shinyjs (version 0.0.3.3)

classFuncs: Add/remove CSS class

Description

Add or remove a CSS class from an HTML element.

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 }

Details

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. 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}.

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::observe({
        if (input$btn == 0) {
          return(NULL)
        }
        # 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")