Hide and show sidebar panel in shiny

Question

My shiny app has 3 tabPanel in mainPanel, each tabPanel has their own sidebarPanel. I use shinyBS to set sidebarPanel "show and Hide"

bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE)

In server

observeEvent(input$showpanel, {
     if(input$showpanel == TRUE) {
      removeCssClass("Main", "col-sm-12")
      addCssClass("Main", "col-sm-8")
      shinyjs::show(id = "Sidebar")
      shinyjs::enable(id = "Sidebar")
    }
    else {
      removeCssClass("Main", "col-sm-8")
      addCssClass("Main", "col-sm-12")
      shinyjs::hide(id = "Sidebar")
    }
  })

I test couple times, 2 tabs work like I expected, but the tab with plots (I use plotly), it appears hiding sidebar but the plots are not automatic stretching out until I click the other tab and go back Plot tab. So if I want to see the plots with full screen, I need to do extra by clicking another tab, and come back.

How do I fix this issue?

Thanks

score 3 · Answer 1 · answered Dec 20 '17 at 08:03

Next time please post reproducible example...

library(shiny)
library(shinydashboard)
library(plotly)
library(shinyjs)
library(shinyBS)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
              $(window).trigger("resize"); }'),
    extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
                  $(window).trigger("resize"); }'),
    bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
    fluidRow(tabsetPanel(id='tabs',
                         tabPanel(value=1,title="Tab1"),
                         tabPanel(value=2,title="Tab2"),
                         tabPanel(value=3, title="Plot",
                                  fluidRow(
                                    column(12,
                                           plotlyOutput('plot', height=800))))
    )
    )))


server <- function(input, output, session) { 


  output$plot <- renderPlotly({
    plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
  })

  observe({
    if(input$showpanel == TRUE) {
      js$showSidebar()
    }
    else {
      js$hideSidebar()
    }
  })
}

shinyApp(ui, server)

One way to do this is to trigger a window resize event when you add/remove the sidebar to force the plot to be redrawn at the right size after the sidebar is shown/hidden. For this purpose i have used:

useShinyjs(),
    extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
              $(window).trigger("resize"); }'),
    extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
                  $(window).trigger("resize"); }')

functions.

Getting this error when I try your app: `Error: shinyjs: extendShinyjs: 'functions' argument must be provided.` — Tarun Parmar, Mar 17 '21 at 17:13

score 0 · Answer 2 · answered Nov 22 '21 at 19:58

0

The functions argument was missing

    extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse"); 
          $(window).trigger("resize"); }', functions=c("hideSidebar")),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse"); 
              $(window).trigger("resize"); }', functions=c("showSidebar")),

answered Nov 22 '21 at 19:58

Victor Valencia

1

1

Hi Victor. I think you are answering the Tarun-Parmar comments on the answer from Mal_a. If so, the purpose here is to answer the main question. You could make another comment on that. – fmassica Nov 23 '21 at 02:08
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 23 '21 at 02:09
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30407557) – mnist Nov 23 '21 at 22:58

Hide and show sidebar panel in shiny

2 Answers2