shinyjs demo

Show/hide advanced info

Timestamp: Tue Apr 29 19:37:46 2025 Update



shinyjs usage in this app

  • Selecting 'Bigger text' uses shinyjs::addClass() to add a CSS class to the webpage that enlarges the font
  • Typing text inside the 'Name' field uses shinyjs::toggleState() to enable the submit button, and similary to disable the button when there is no input
  • Clicking 'Show/hide advanced info' uses shinyjs::onclick() and shinyjs::toggle() to toggle between showing and hiding the advanced info section when the link is clicked
  • Clicking 'Update' uses shinyjs::onclick() and shinyjs::html() to update the HTML in the timestamp when the link is clicked
  • Clicking 'Submit' uses shinyjs::alert() to show a message to the user

These are just a subset of the functions available in shinyjs.

This app is available at http://daattali.com/shiny/shinyjs-basic/ and the source code is on GitHub

Visit the shinyjs website to learn more

shinyjs demo
by Dean Attali

show with app 
library(shiny)
library(shinyjs)

source("helper-text.R")

shinyApp(
  ui = fixedPage(
    useShinyjs(),
    inlineCSS(list(.big = "font-size: 2em",
                   a = "cursor: pointer")),
    fixedRow(
      column(6, wellPanel(
        div(id = "myapp",
            h2("shinyjs demo"),
            checkboxInput("big", "Bigger text", FALSE),
            textInput("name", "Name", ""),
            a(id = "toggleAdvanced", "Show/hide advanced info"),
            hidden(
              div(id = "advanced",
                numericInput("age", "Age", 30),
                textInput("company", "Company", "")
              )
            ),
            p("Timestamp: ",
              span(id = "time", date()),
              a(id = "update", "Update")
            ),
            actionButton("submit", "Submit"),
            actionButton("reset", "Reset form")
        ),
        br(), br()
      )),
      column(6,
             getHelperText()
      )
    )
  ),

  server = function(input, output) {
    onclick("update", html("time", date()))
    onclick("toggleAdvanced", toggle(id = "advanced", anim = TRUE))

    observe({
      toggleClass("myapp", "big", input$big)
    })

    observe({
      toggleState("submit", !is.null(input$name) && input$name != "")
    })

    observeEvent(input$submit, {
      alert("Thank you!")
    })

    observeEvent(input$reset, {
      reset("myapp")
    })
  }
)
getHelperText <- function() {
  div(
    h3("shinyjs usage in this app"),
    tags$ul(
      tags$li(
        "Selecting 'Bigger text' uses", code("shinyjs::addClass()"),
        "to add a CSS class to the webpage that enlarges the font"),
      tags$li(
        "Typing text inside the 'Name' field uses", code("shinyjs::toggleState()"),
        "to enable the submit button, and similary to disable the button",
        "when there is no input"),
      tags$li(
        "Clicking 'Show/hide advanced info' uses", code("shinyjs::onclick()"),
        "and", code("shinyjs::toggle()"), "to toggle between showing and",
        "hiding the advanced info section when the link is clicked"),
      tags$li(
        "Clicking 'Update' uses", code("shinyjs::onclick()"), "and",
        code("shinyjs::html()"), "to update the HTML in the timestamp when",
        "the link is clicked"),
      tags$li(
        "Clicking 'Submit' uses", code("shinyjs::alert()"), "to show a",
        "message to the user")
    ),
    p("These are just a subset of the functions available in shinyjs."),
    p("This app is available at",
      a("http://daattali.com/shiny/shinyjs-basic/",
        href = "http://daattali.com/shiny/shinyjs-basic/"),
      "and the source code is",
      a("on GitHub",
        href = "https://github.com/daattali/shinyjs/blob/master/inst/examples/basic/app.R")
    ),
    a("Visit the shinyjs website to learn more",
      href = "http://deanattali.com/shinyjs/")
  )
}
Code license: MIT