Hyperlink that switches to a "hidden" tab in shinydashboard

Question

I want a hyperlink to work in practical terms just as a tab button would. This is my code so far (it has two normal tabs and a "hyperlink tab"):

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Tab 1", tabName = "tab1", icon = icon("home")),
      menuItem("Tab 2", tabName = "tab2", icon = icon("chart-bar")),
      sidebarUserPanel(
        actionLink("show_hidden_tab", "Show Hidden Tab")
      )
    )
  ),
  dashboardBody(
    
      
    uiOutput("hidden_tab_ui")
    
  )
)

server <- function(input, output, session) {
  hiddenTabContent <- reactiveVal(F)
  
  observeEvent(input$show_hidden_tab, {
    hiddenTabContent(!hiddenTabContent())
    
  })
  
  observeEvent(input$tabs, {
    hiddenTabContent(F)
    updateTabItems(session, "tabs", selected = input$tabs)
  })
  
  output$hidden_tab_ui <- renderUI({
    if(hiddenTabContent()){
      h2("Hidden Tab Content")
      
    }else{
      tabItems(
        tabItem(tabName = "tab1",
                h2("Tab 1 Content")
        ),
        tabItem(tabName = "tab2",
                h2("Tab 2 Content")
        )
      )
      
    }
    
  })
}

shinyApp(ui, server)

It almost works properly, except for the fact that when the app is launched, the content of tab 1 is not displayed until the user switches to tab 2, and then goes back to tab 1

How can I fix this and make the first tab's content visible as soon as the app is launched?

Answer 1

Below is an option where you can use shinyjs::hidden to hide the menuItem.

Then you can use your actionLink as a way to show the hidden tab item by using updateTabItems.

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Tab 1", tabName = "tab1", icon = icon("home")),
      menuItem("Tab 2", tabName = "tab2", icon = icon("chart-bar")),
      hidden(menuItem("Tab 3", tabName = "hidden_tab", icon = icon("chart-bar"))),
      sidebarUserPanel(
        actionLink("show_hidden_tab", "Show Hidden Tab")
      )
    )
  ),
  dashboardBody(
    useShinyjs(),
    tabItems(
      tabItem(tabName = "tab1",
              h2("Tab 1 Content")
      ),
      tabItem(tabName = "tab2",
              h2("Tab 2 Content")
      ),
      tabItem(tabName = "hidden_tab",
            h2("Hidden Content")
      )
    )
  )
)


server <- function(input, output, session) {
  # display hidden tab when action link is clicked
  observeEvent(input$show_hidden_tab, {
    updateTabItems(session, "tabs", "hidden_tab")
  })
}

shinyApp(ui, server)

Example: