Change the width of the main panel depending on what tab is open

layout_change.R

library(shiny)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  
  # You have to include this one-liner CSS
  tags$style(".fullwidth { width: 100% !important; }"),
  
  # You need to wrap the sidebarLayout() by a div() and give it an ID
  div(id = "SOMEID",
    sidebarLayout(
      sidebarPanel(
        "side panel"
      ),
      mainPanel(
        tabsetPanel(
          id = "maintabs",
          tabPanel(
            "tab1",
            "Tab 1 show"
          ),
          tabPanel(
            "tab2",
            "Tab 2 hide"
          ),
          tabPanel(
            "tab3",
            "Tab 3 show"
          ),
          tabPanel(
            "tab4",
            "Tab 4 hide"
          )
        )      
      )
    )
  )
)

server <- function(input, output) {
  observe({
    if (input$maintabs %in% c("tab1", "tab3")) {
      # In all these shinyjs functions, you need to use the same ID as you used in the div in the UI
      shinyjs::show(select = "#SOMEID > div > div:nth-child(1)")
      shinyjs::removeClass(class = "fullwidth",
                           select = "#SOMEID > div > div:nth-child(2)")
    } else {
      shinyjs::hide(select = "#SOMEID > div > div:nth-child(1)")
      shinyjs::addClass(class = "fullwidth",
                        select = "#SOMEID > div > div:nth-child(2)")
    }
    
  })
}

shinyApp(ui = ui, server = server)

Thank you for this script exemple. It helps me a lot to manage the fullwidth option for the div class. 👍

Awesome! I forgot I ever made this :)

How did you find this?!