Collapsible boxes without sidebar panel / several collapsibles or accordions as sidebar

Question

I want to create a Shiny app that includes several collapsible boxes as a menu on one side. To do this, I have so far used the bsCollapsePanel function and put it in sidebarPanel. Unfortunately I have an additional margin from the boxes to the sidebarPanel. The boxes look set off. But I would like to use ONLY collapsible boxes as sidebar.

I have used the following solution so far:

library(shinythemes)
library(shinyBS)

fluidPage(
  theme = shinytheme("cosmo"),
  titlePanel(# app title/description
    "ShinyApp"),
  sidebarLayout(
    mainPanel(plotOutput("plot1")),
    
    sidebarPanel(
      bsCollapsePanel(
        "Color Selection",
        actionButton("f1blue", "Blue"),
        actionButton("f1red", "Red"),
        actionButton("f2blue", "Blue"),
        actionButton("f2red", "Red"),
        style = "success"
      ),
      
     
    )
   
  )
)

And this is the graphical output:

And this is how it should look. I want to avoid this "box within the box" effect. Only collapsibles, no border and no margin through the sidebar panel:

Is there a solution for this and / or maybe another package is better for creating collapsibles / accordions?

I am grateful for any advice!

Have you tried using `flowLayout` or `verticalLayout`? https://shiny.rstudio.com/images/shiny-cheatsheet.pdf — , Jul 14 '21 at 14:57

score 0 · Answer 1 · answered Jul 20 '21 at 23:27

How about this:

library(shinythemes)
library(shinyBS)

ui <- fluidPage(
    theme = shinytheme("cosmo"),
    tags$style('#sidebar {border: none; background-color: transparent; padding: 0;}'),
    titlePanel(# app title/description
        "ShinyApp"),
    sidebarLayout(
        mainPanel(plotOutput("plot1")),
        sidebarPanel(
            id = "sidebar",
            bsCollapsePanel(
                "Color Selection",
                actionButton("f1blue", "Blue"),
                actionButton("f1red", "Red"),
                actionButton("f2blue", "Blue"),
                actionButton("f2red", "Red"),
                style = "success"
            ),
            bsCollapsePanel(
                "Color Selection",
                actionButton("f1blue", "Blue"),
                actionButton("f1red", "Red"),
                actionButton("f2blue", "Blue"),
                actionButton("f2red", "Red"),
                style = "success"
            )
        )
        
    )
)
server <- function(input, output, session) {
    output$plot1 <- renderPlot(plot(1))
}

shinyApp(ui = ui, server = server)

Collapsible boxes without sidebar panel / several collapsibles or accordions as sidebar

1 Answers1