R: Add/remove CSS class

classFuncs {shinyjs} | R Documentation

## 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.
`addCssClass`, `removeCssClass`, and `toggleCssClass` 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 `toggleClass`, that condition will be used to determine if to add or remove the class. The class will be added if the condition evaluates 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 W3Schools.

### Usage

    addClass(id, class, selector)

    addCssClass(id, class, selector)

    removeClass(id, class, selector)

    removeCssClass(id, class, selector)

    toggleClass(id, class, condition, selector)

    toggleCssClass(id, class, condition, selector)

### Arguments

`id` | The id of the element/Shiny tag
`class` | The CSS class to add/remove
`selector` | JQuery selector of the elements to target. Ignored if the `id` argument is given. For example, to add a certain class to all inputs with class x, use `selector = "input.x"`
`condition` | An optional argument to `toggleClass`, see 'Details' below.

### Note

`shinyjs` must be initialized with a call to `useShinyjs()` in the app's ui.

### See Also

`useShinyjs`, `runExample`, `inlineCSS`,

### Examples

    if (interactive()) {
      library(shiny)

      shinyApp(
        ui = fluidPage(
          useShinyjs(),  # Set up shinyjs
          # Add a CSS class for red text colour
          inlineCSS(list(.red = "background: red")),
          actionButton("btn", "Click me"),
          p(id = "element", "Watch what happens to me")
        ),
        server = function(input, output) {
          observeEvent(input$btn, {
            # Change the following line for more examples
            toggleClass("element", "red")
          })
        }
      )
    }
    ## Not run:
      # 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")

    ## End(Not run)

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

[Package shinyjs version 0.9 Index]