I have a shiny app with a mainPanel and a sidebarPanel inside a tabPanel in a navbarPage. I need an option to hide the sidebarPanel similar to this: Hide sidebar in default in shinydashboard and https://github.com/daattali/shinyjs/issues/43.
An actionButton should control if the sidebarPanel is shown or collapsed.
This is the code:
library(shiny)
library(shinyjs)
ui <- fluidPage(
navbarPage("",
tabPanel("tab",
sidebarPanel(
useShinyjs()
),
mainPanel(actionButton("showSidebar", "Show sidebar"),
actionButton("hideSidebar", "Hide sidebar")
)
)
)
)
server <-function(input, output, session) {
observeEvent(input$showSidebar, {
shinyjs::removeClass(selector = "body", class = "sidebarPanel-collapse")
})
observeEvent(input$hideSidebar, {
shinyjs::addClass(selector = "body", class = "sidebarPanel-collapse")
})
}
shinyApp(ui, server)
Hope somebody can help :)
I have modified your code to hide and show the sidebar. To create the id
for the sidebarPanel
I have enclosed it within div and given it theid = Sidebar
. To show and hide the side bar I have used shinyjs
function show
and hide
with the id as Sidebar
.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage("",
tabPanel("tab",
div( id ="Sidebar",sidebarPanel(
)),
mainPanel(actionButton("showSidebar", "Show sidebar"),
actionButton("hideSidebar", "Hide sidebar")
)
)
)
)
server <-function(input, output, session) {
observeEvent(input$showSidebar, {
shinyjs::show(id = "Sidebar")
})
observeEvent(input$hideSidebar, {
shinyjs::hide(id = "Sidebar")
})
}
shinyApp(ui, server)
Hope it helps!