How to remove residual when hiding a tabpanel in shiny

Question

I would like to hide/show a tabpanel given certain conditions. When selecting "source 2", I would like to hide tab2, but the code that I used have a bug. If I first selected "source 1", and then clicked "tab2", and changed the data source to "source 2", the "tab2" tabpanel indeed hided, but the content of "tab2" covered the contents of "tab1". How can I remove the resudual of the hided tab? Any thoughts would be highly appreciated.

library(shiny)
library(shinyjs)

runApp(list(
  ui = fluidPage(
    useShinyjs(),
    selectInput('dataSource',h5("Please choose the data source:"), c("source 1", "source 2"), "source 1"),
    tabsetPanel(
      id = "navbar",
      tabPanel(title = "tab1",
               value = "tab1",
               h1("Tab 1")
      ),
      tabPanel(id="id2", title = "tab2",
               value = "tab2",
               h1("Tab 2")
      )
    )
  ),
  server = function(input, output) {
    observeEvent(input$dataSource,{
      toggle(condition = (input$dataSource !='source 2'), selector = "#navbar li a[data-value=tab2]")
    })
  }
))

[the bug looks like this][1] [1]: http://i.stack.imgur.com/eOHLS.png

Somehow your code works correctly on my computer with no errors. — Xiongbing Jin

Michal Majka Michal Majka · Accepted Answer · 2016-04-26T19:31:00

I could reproduce the error on my laptop.

My advice would be to use a renderUI function to create dynamically a tabsetPanel.

library(shiny)
# library(shinyjs)

runApp(list(
  ui = fluidPage(
    #useShinyjs(),
    selectInput('dataSource',h5("Please choose the data source:"), c("source 1", "source 2"), "source 1"),
    uiOutput("dynamic")

  ),
  server = function(input, output) {

    output$dynamic <- renderUI({

      if (input$dataSource == "source 1") { 

        tabsetPanel(
          id = "navbar",
          tabPanel(title = "tab1",
                   value = "tab1",
                   h1("Tab 1")
          ),
          tabPanel(id="id2", title = "tab2",
                   value = "tab2",
                   h1("Tab 2")
          )
        )
      } else {
        tabsetPanel(
          id = "navbar",
          tabPanel(title = "tab1",
                   value = "tab1",
                   h1("Tab 1")
          )
        )
      }
    })
  }
))

How to remove residual when hiding a tabpanel in shiny

1 Answers