title: Shiny - resize other panels when one of them is set to hidden
body: <p>I am using Shiny to build a web app. I am adding a button that will show/hide some element on the page. But after the element got hide, other page componemt does not resize themselves to fill the screen. For example, I try to hide the sidebar of a sidebarLayout, by using toggle function in shinyjs. Here's the code I have:</p>
  
  <pre><code>library(shiny)
  library(shinyjs)
  ui &lt;- fluidPage(useShinyjs(), br(), wellPanel(sidebarLayout(
    sidebarPanel(id="sidebar"),
    mainPanel(wellPanel(actionButton("sideBarControl", label = "Show/Hide")))
  )))
  server &lt;- function(input, output) {
    observeEvent(input$sideBarControl, {
      shinyjs::toggle(id = "sidebar")
      # potentially some statements here to fix the layout? But what should they be?
    })
  }
  shinyApp(ui = ui, server = server)
  </code></pre>
  
  <p>The sidebar hides/shows when clicking sidebarControl button correctly, but instead of resize mainPanel to fill the screen, it shifts mainPanel to the left, and left a space at the right. How to resolve this? See the pictures below:</p>
  
  <p><img src="https://i.stack.imgur.com/wzVyO.png" alt="Before hiding the sidebar"></p>
  
  <p><img src="https://i.stack.imgur.com/plpOf.png" alt="After hiding the sidebar - actual"></p>
  
  <p><img src="https://i.stack.imgur.com/ZXCOk.png" alt="After hiding the sidebar - expected"></p>