R Shiny: Make collapsible tabsetPanel

Question

Hi I feel like this should be simple but I can't find a solution anywhere.

In the code below I have made the navbarpage collapsible but can't find a way to achieve the same thing for a tabsetpanel so the app ends up looking messy on eg a mobile device.

library(shiny)


# Define UI 
ui <- fluidPage(
    navbarPage("Hello",
        collapsible=T,
        tabPanel("a",
            tabsetPanel(type = "tabs",
                tabPanel("1"),
                tabPanel("2"),
                tabPanel("3"),
                tabPanel("4"),
                tabPanel("5"))),
        tabPanel("b"),
        tabPanel("c"),
        tabPanel("d"),
        tabPanel("e")
        )
    )

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

shinyApp(ui = ui, server = server)

Thanks for your help!

Answer 1

You can use the bootstrap-tabcollapse library. Download the js file and put it in the www subfolder.

library(shiny)

js <- "$(document).ready(function(){$('#tabset').tabCollapse();});"

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(
        "a.js-tabcollapse-panel-heading {
           display: block;
           text-align: center;
        }"
      )
    ),
    tags$script(src = "bootstrap-tabcollapse.js"),
    tags$script(HTML(js))
  ),
  navbarPage("Hello",
             collapsible=T,
             tabPanel("a",
                      tabsetPanel(type = "tabs",
                                  tabPanel("1", tags$p("hello")),
                                  tabPanel("2", tags$p("hi")),
                                  tabPanel("3"),
                                  tabPanel("4"),
                                  tabPanel("5"),
                                  id = "tabset")),
             tabPanel("b"),
             tabPanel("c"),
             tabPanel("d"),
             tabPanel("e")
  )
)

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

shinyApp(ui = ui, server = server)