classFuncs: Add/remove CSS class

In shinyjs: Easily Improve the User Experience of Your Shiny Apps in Seconds

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 = NULL, class = NULL, selector = NULL, asis = FALSE)

addCssClass(id = NULL, class = NULL, selector = NULL, asis = FALSE)

removeClass(id = NULL, class = NULL, selector = NULL, asis = FALSE)

removeCssClass(id = NULL, class = NULL, selector = NULL, asis = FALSE)

toggleClass(
  id = NULL,
  class = NULL,
  condition = NULL,
  selector = NULL,
  asis = FALSE
)

toggleCssClass(
  id = NULL,
  class = NULL,
  condition = NULL,
  selector = NULL,
  asis = FALSE
)

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"
asis	If TRUE, use the ID as-is even when inside a module (instead of adding the namespace prefix to the ID).
condition	An optional argument to toggleClass, see 'Details' below.

Note

If you use S4 classes, you should be aware of the fact that both S4 and shinyjs use the removeClass() function. This means that when using S4, it is recommended to use removeCssClass() from shinyjs, and to use methods::removeClass() for S4 object.

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

shinyjs documentation built on Dec. 23, 2021, 5:06 p.m.