How can I hide\show\toggle certain fields in R shiny modal based on other modal fields

Question

I wish to have a popout modal within a shiny app that depending on the user's action within the modal, it would show or hide certain fields.

For example, the Modal includes a button that when pressed, another button would apear\disappear.

sadly, although the observeEvent detects a change in the hide\show button, shinyjs::toggle(), shinyjs::hide() and shinyjs::show() fail to work

example script:

library(shiny)


ui <- fluidPage(
  actionButton("show_modal", "show modal"),
)

server <- function(input, output) {

  observeEvent(input$show_modal, {
    
          
    showModal(
      
      modalDialog(footer = NULL,easyClose = T,
                  
                  tagList(
                    
                    fluidRow(
                    
                    box(status = "primary", width = 6, style = "direction: ltr",
                        
                        actionButton("toggle_btn", "show or hide second button")
                        
                        
                        )),
                    
                    fluidRow(
                      
                    box(status = "success", width = 6, style = "direction: ltr",
                        
                        
                        actionButton("box_btn", "Box!")
                        
                        
                    ))
                    
                    
                  )
      ))
  })
  

  observeEvent(input$toggle_btn, {
    
    shinyjs::toggle("box_btn")
    cat("\npresentation button pressed\n")
    
  })
  

}

shinyApp(ui, server)

Answer 1

You can do it without shinyjs by using conditionalPanel() :

library(shiny)

ui <- fluidPage(
  actionButton("show_modal", "show modal"),
)

server <- function(input, output) {
  
  rv <- reactiveValues(show_btn = FALSE)
  
  observeEvent(input$toggle_btn, {
    rv$show_btn <- !rv$show_btn
  })
  output$show_btn <- reactive({rv$show_btn})
  outputOptions(output, "show_btn", suspendWhenHidden = FALSE)
  
  
  observeEvent(input$show_modal, {
    
    # add_path_to_existing_offers_DB(user = user)
    
    showModal(
      
      modalDialog(
        footer = NULL,
        easyClose = T,
        tagList(
          
          fluidRow(

                actionButton("toggle_btn", "show or hide second button")

          ),
          
          conditionalPanel(
            condition = "output.show_btn == true",
            
            fluidRow(
              
              actionButton("box_btn", "Box!")
              
            )
          )
        )
      )
    )
  })
  

}

shinyApp(ui, server)

Answer 2

Turns out as Dean Attali the author of shinyjs pointed out kindly, that I failed to call useShinyjs() function.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  **useShinyjs(),**
  actionButton("show_modal", "show modal"),
)

server <- function(input, output) {

  observeEvent(input$show_modal, {
    
    
    showModal(
      
      modalDialog(footer = NULL,easyClose = T,
                  
                  tagList(
                    
                    fluidRow(
                    
                    box(status = "primary", width = 6, style = "direction: ltr",
                        
                        actionButton("toggle_btn", "show or hide second button")
                        
                        
                        )),
                    
                    fluidRow(
                      
                    box(status = "success", width = 6, style = "direction: ltr",
                        
                        
                        actionButton("box_btn", "Box!")
                        
                        
                    ))
                    
                    
                  )
      ))
  })
  

  observeEvent(input$toggle_btn, {
    
    shinyjs::toggle("box_btn")
    cat("\npresentation button pressed\n")
    
  })
  

}

shinyApp(ui, server)