Hide text input and button after click

April 29, 2022

I am new with Shiny. I have developed a very simple app that modifies a string inserted in a text input after the click of a button. The result appears in a text output present from the beginning. This is my code:

# ui.R

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  textInput("caption", "Caption", "abc"),
  actionButton("btn_input", "Enter"),
  verbatimTextOutput("value")
)

# server.R

library(shiny)
library(shinyjs)

server <- function(input, output) {
    output$value <- reactive({
        # toggle(id="caption")
        input$btn_input
        v <- isolate({input$caption})
        if (v == "xxx") {
            value <- paste(v, "a")
        } else {
            value <- paste(v, "b")
        }
        value
    })
}

I would like the text output to appear only after clicking the button.
At the same time I would like the caption, the text input and the button to disappear after clicking the button.

What is the easiest way to make this change? Thanks in advance.

>Solution :

I think conditionalPanel is the easiest way:

library(shiny)

ui <- fluidPage(
  conditionalPanel(
    "input.btn_input === 0",
    textInput("caption", "Caption", "abc"),
    actionButton("btn_input", "Enter")
  ),
  conditionalPanel(
    "input.btn_input !== 0",
    style = "display: none;",
    verbatimTextOutput("value")
  )
)


server <- function(input, output) {
  
  Value <- eventReactive(input$btn_input, {
    v <- input$caption
    if (v == "xxx") {
      paste(v, "a")
    } else {
      paste(v, "b")
    }
  })
  
  output$value <- renderPrint({
    Value()
  })
}

shinyApp(ui, server)

If you want a "Back" button, as asked in your comment, you can proceed as follows:

library(shiny)

ui <- fluidPage(
  conditionalPanel(
    "output.show_input",
    textInput("caption", "Caption", "abc"),
    actionButton("btn_input", "Enter")
  ),
  conditionalPanel(
    "output.show_output",
    style = "display: none;",
    verbatimTextOutput("value"),
    actionButton("btn_back", "Back")
  )
)


server <- function(input, output) {
  
  ShowInput <- reactiveVal(TRUE)
  output$show_input <- reactive({
    ShowInput() 
  })
  outputOptions(output, "show_input", suspendWhenHidden = FALSE)

  ShowOutput <- reactiveVal(FALSE)
  output$show_output <- reactive({
    ShowOutput() 
  })
  outputOptions(output, "show_output", suspendWhenHidden = FALSE)
  
  observeEvent(input$btn_input, {
    ShowInput(FALSE)
    ShowOutput(TRUE)
  })
  
  observeEvent(input$btn_back, {
    ShowInput(TRUE)
    ShowOutput(FALSE)
  })
  
  Value <- eventReactive(input$btn_input, {
    v <- input$caption
    if (v == "xxx") {
      paste(v, "a")
    } else {
      paste(v, "b")
    }
  })
  
  output$value <- renderPrint({
    Value()
  })
}

shinyApp(ui, server)