activate tabpanel from another tabpanel
I want when i start the application the tab panel tab2 = desactivated, and will be activated once i click the button in the first tab panel tab1, i tried with shinyjs and through CSS properties but i can not do that.
thanks for your help Alex
library(shiny)
library(shinyjs)
runApp(list(
ui = bootstrapPage(
tabsetPanel(
tabPanel(title = "tab1", id="tab1",
br(),
actionButton("click", label = "View tab2 panel")),
tabPanel(title = "tab2", id="tab2")
)
),
server = function(input, output, session){
}
))
You need a bit of javascript to do this. Here's a solution using shinyjs. I also included some css to make it clear when the tab is disabled
jscode <- "
shinyjs.disableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.bind('click.tab', function(e) {
e.preventDefault();
return false;
});
tab.addClass('disabled');
}
shinyjs.enableTab = function(name) {
var tab = $('.nav li a[data-value=' + name + ']');
tab.unbind('click.tab');
tab.removeClass('disabled');
}
"
css <- "
.nav li a.disabled {
background-color: #aaa !important;
color: #333 !important;
cursor: not-allowed !important;
border-color: #aaa !important;
}"
library(shiny)
library(shinyjs)
runApp(list(
ui = fluidPage(
useShinyjs(),
extendShinyjs(text = jscode),
inlineCSS(css),
tabsetPanel(
id = "navbar",
tabPanel(title = "tab1", id = "tab1",
br(),
actionButton("btn", label = "View tab2 panel")),
tabPanel(title = "tab2", id = "tab2")
)
),
server = function(input, output, session) {
# disable tab2 on page load
js$disableTab("tab2")
observeEvent(input$btn, {
# enable tab2 when clicking the button
js$enableTab("tab2")
# switch to tab2
updateTabsetPanel(session, "navbar", "tab2")
})
}
))
You could also put the javascript in a separate file and use extendShinyjs(file = ...)
instead of extendShinyjs(text = ...)
.
Looking at this 5 years later, I had to make this change to Dean's code to make it work:
extendShinyjs(text = jscode)
becomes
extendShinyjs(text = jscode, functions = c('disableTab','enableTab'))