Hide/show results with submit button in Shiny with shinyjs

Question

I'm trying to create a Shiny app that includes a submit button for inputs and a checkbox for hiding/showing the results. My issue is that ticking or unticking the hide/show checkbox has no effect unless I hit the submit button again.

How can I show results as soon as the user checks the checkbox and hide it on uncheck without any dependency on submit button? It's similar to this question, but I'm using the shinyjs package instead.

Here is some sample code to illustrate the issue:

UI.R

ui <- shinyUI(fluidPage(
# Initiate shinyjs package
useShinyjs(),
                    # Select layout type 
                    sidebarLayout(
                        # Sidebar content
                        sidebarPanel(
                            # Input phrase1
                            textInput("phrase1", "Enter a word or phrase here", "It’s not rocket"),
                            # Input phrase2
                            textInput("phrase2", "Enter a word or phrase here", "science"),
                            # Submit button
                            submitButton("Paste phrases")
                        ),
                        # Main panel content
                        mainPanel(
                            # Checkbox to show/hide results
                            checkboxInput("checkbox", "Show results?", TRUE), 
                            # Results
                            textOutput("full_phrase")
                        )
                    )
))

Server.R

server <- shinyServer(function(input, output) {
        observe(toggle("full_phrase", condition=(input$checkbox==T)))
        output$full_phrase <- renderText({paste(input$phrase1, input$phrase2)})
})

Any help greatly appreciated!

Answer 1

Your submitButton control his halting all reactivity until it is clicked. If you want any elements of your UI to be reactive independent of your button, you should use actionButton instead, and use an event observer for the actions that you want performed when the button is clicked.

library(shiny)
library(shinyjs)

shinyApp(
  ui = 
    shinyUI(fluidPage(
      # Initiate shinyjs package
      useShinyjs(),
      # Select layout type 
      sidebarLayout(
        # Sidebar content
        sidebarPanel(
          # Input phrase1
          textInput("phrase1", "Enter a word or phrase here", "It's not rocket"),
          # Input phrase2
          textInput("phrase2", "Enter a word or phrase here", "science"),
          # Submit button
          actionButton("paste_phrase",
                       label = "Paste phrases")
        ),
        # Main panel content
        mainPanel(
          # Checkbox to show/hide results
          checkboxInput("checkbox", "Show results?", TRUE), 
          # Results
          textOutput("full_phrase")
        )
      )
    )),

  server = 
    shinyServer(function(input, output, session) {
      observe({
        toggle("full_phrase", 
               condition=input$checkbox)
      })

      pasted_phrases <- 
        eventReactive(
          input$paste_phrase,
          {
            paste(input$phrase1, input$phrase2)
          }
        )

      output$full_phrase <- 
        renderText({pasted_phrases()})
    })
)