Show/Hide tab is almost working, but not quite

I have a simple shiny app adapted from an example I found online.

I want to either:
-Select option1 + only show tab1 (hide tab2)

or

-Select option2 + only show tab2 (hide tab1).

Here is the current code:

library(shiny)
library(shinyjs)

jscode <- '
  shinyjs.init = function() {
  $(".nav").on("click", ".disabled", function (e) {
  e.preventDefault();
  return false;
  });
  }'

css <- '
  .disabled {
  background: #eee !important;
  cursor: default !important;
  color: black !important;
  }'

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jscode, functions = "init"),
    tags$style(css),
    
    
    selectizeInput("foo", "Select an option",  selected = NULL ,choices=c("Option1","Option2"), multiple = TRUE),
    
    
    tabsetPanel(
      
      
      id = "navbar",
      tabPanel(title = "Option1",
               value = "tab1",
               h1("This is Option1")
      ),
      tabPanel(title = "Option2",
               value = "tab2",
               h1("This is Option2")
      )
    )
    
    
  ),
  server = function(input, output) {
    observe(print(length(input$foo)==1))
    observe({
      toggleClass(selector = "#navbar li a[data-value=tab2]", class = "disabled",
                  condition = length(input$foo)==1)
      
    })})

I like this approach:

library(shiny)
library(shinyjs)
library(glue)
shinyApp(
  ui = fluidPage(
    useShinyjs(),

    selectizeInput("foo", "Select an option",
      selected = NULL,
      choices = c("Option1", "Option2"), multiple = TRUE
    ),
    uiOutput("dynamictabSetPanel")
  ),
  server = function(input, output) {
    output$dynamictabSetPanel <- renderUI({
      
      tabcontents <- imap(sort(req(input$foo)),~(tabPanel(
        title = glue("{.x}"),
        value =  glue("tab{.y}"),
        h1( glue("This is {.x}"))
      ))) 

      
      do.call(what=tabsetPanel,
              args = tabcontents %>% append(list(id="navbar")))
  })
  }
)
1 Like

Woah...
Thanks! This is awesome.

Also - I understand the approach using glue, but how could I make this related to a data frame column for example?

i.e. - can I make selection of option1 show mtcars$cyl and option 2 show mtcars$mpg ?

library(shiny)
library(shinyjs)
library(glue)

data_to_show <- list("Option1"=mtcars$cyl ,
                     "Option2"=mtcars$mpg )

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    
    selectizeInput("foo", "Select an option",
                   selected = NULL,
                   choices = c("Option1", "Option2"), multiple = TRUE
    ),
    uiOutput("dynamictabSetPanel")
  ),
  server = function(input, output) {
    output$dynamictabSetPanel <- renderUI({
      
      tabcontents <- imap(sort(req(input$foo)),~(tabPanel(
        title = glue("{.x}"),
        value =  glue("tab{.y}"),
        h1( glue("This is {.x}")),
        renderTable(table(data_to_show[[.x]]))
      ))) 
      
      
      do.call(what=tabsetPanel,
              args = tabcontents %>% append(list(id="navbar")))
    })
  }
)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.