shinjs::show() not showing element after shinyjs::hide()

Question

I have a shiny dashboard where I'm trying to use action buttons to select through what to show instead of the menu tabs. I have it built so that when you click the action button assigned to one specific fluid row it will hide the other tabs, but I can't seem to get it to bring the fluid row back. I'm using shinyjs show and hide functions.

this is the code I have in my ui

    dashboardBody(
     tags$head(
       tags$link(
         rel = "stylesheet",
         type = "text/css",
         href = "datainstate_style.css")
     ),
     useShinyjs(),
     introjsUI(),

 # MAIN BODY ---------------------------------------------------------------- 

     fluidRow(
       column(
         width = 12,
           bsButton("VsOpponent", 
                    label = "Vs Opponent", 
                    icon = icon("users"), 
                    style = "success"),
           bsButton("trendsinperformance", 
                    label = "Trends", 
                    icon = icon("digital-tachograph"), 
                    style = "success"),
           bsButton("lineupsandchampions", 
                    label = "Lineups and Champions", 
                    icon = icon("child"), 
                    style = "success")
       )
    ),

    fluidRow(
      div( id = "VsOpponent_panel",
        column(
          width = 12,
          gt_output("opponents_table")
        ),
        column(
          width = 12,
          plotOutput("radar_plot")
        ),
        column(
          width = 12,
          plotOutput("gold_plot")
        )
      )
     ),
 fluidRow(
   div( id = "trendsinperformance_panel",
     column(
       width = 12,
       plotOutput("gold")
     )
   )
 ),

 fluidRow(
   div( id = "lineupsandchampions_panel",
     column(
       width = 12,
       textOutput("test")
     )
   )
 )
   
  )

And then the code in my server that corresponds to this is below

  ## Determine which panel to show
  observeEvent("", {
    show("VsOpponent_panel")
    hide("lineupsandchampions_panel")
    hide("trendsinperformance_panel")
  }, once = TRUE)
  observeEvent(input$VsOpponent, {
    show("VsOpponent_panel")
    hide("lineupsandchampions_panel")
    hide("trendsinperformance_panel")
  })
  observeEvent(input$trendsinperformance, {
    show("trendsinperformance_panel")
    hide("lineupsandchampions_panel")
    hide("VsOpponent_panel")
  })
  observeEvent(input$lineupsandchampions, {
    show("lineupsandchampions_panel")
    hide("trendsinperformance_panel")
    hide("VsOpponent_panel")
  })

Thanks for your help!

Answer 1

Hmm, the buttons seem to work for me as expected, try to hide the divs first then show the other ones

library(shiny)
library(shinyjs)
library(shinyBS)

ui <- fluidPage(
    useShinyjs(),
    fluidRow(
        column(
            width = 4,
            bsButton("VsOpponent", 
                     label = "Vs Opponent", 
                     icon = icon("users"), 
                     style = "success"),
            bsButton("trendsinperformance", 
                     label = "Trends", 
                     icon = icon("digital-tachograph"), 
                     style = "success"),
            bsButton("lineupsandchampions", 
                     label = "Lineups and Champions", 
                     icon = icon("child"), 
                     style = "success")
        )
    ),
    
    fluidRow(
        div(id = "VsOpponent_panel",
             column(
                 width = 4,
                 plotOutput("p1")
             ),
             column(
                 width = 4,
                 plotOutput("p2")
             ),
             column(
                 width = 4,
                 plotOutput("p3")
             )
        )
    ),
    fluidRow(
        div( id = "trendsinperformance_panel",
             column(
                 width = 4,
                 plotOutput("p4")
             )
        )
    ),
    
    fluidRow(
        div( id = "lineupsandchampions_panel",
             column(
                 width = 4,
                 plotOutput("p5")
             )
        )
    )
)

server <- function(input, output, session) {
    
    output$p1 <- renderPlot({plot(runif(10),main = "Plot1")})
    output$p2 <- renderPlot({plot(runif(10),main = "Plot2")})
    output$p3 <- renderPlot({plot(runif(10),main = "Plot3")})
    output$p4 <- renderPlot({plot(runif(10),main = "Plot4")})
    output$p5 <- renderPlot({plot(runif(10),main = "Plot5")})

    
    ## Determine which panel to show
    observeEvent("", {
        hide("lineupsandchampions_panel")
        hide("trendsinperformance_panel")
        show("VsOpponent_panel")
    }, once = TRUE)
    
    observeEvent(input$VsOpponent, {
        hide("lineupsandchampions_panel")
        hide("trendsinperformance_panel")
        show("VsOpponent_panel")
    })
    
    observeEvent(input$trendsinperformance, {
        hide("lineupsandchampions_panel")
        hide("VsOpponent_panel")
        show("trendsinperformance_panel")
    })
    
    observeEvent(input$lineupsandchampions, {
        hide("trendsinperformance_panel")
        hide("VsOpponent_panel")
        show("lineupsandchampions_panel")
    })
    
}

shinyApp(ui, server)