Can I add an arrow icon to my bsCollapsePanel in R Shiny?

user_18285009 0
Viewed 52

Here is a very simple example of two collapsible panels and I would like to add an icon like an arrow or something to show that it is able to collapse.

library(shinyBS)
shinyApp(
  ui =
    fluidPage(
      bsCollapse(id = "collapseExample", open = c("panel 1, panel 2"),
                 bsCollapsePanel("panel 1", "First panel content",
                                 style = "info"),
                 bsCollapsePanel("panel 2", "Second panel content",
                                 style = "warning"))
    ),
  server = 
    function(input, output, session){
      
    }
)

Also if anyone knows a way to change the css styling of the panels (like color, font size, font, text alignment, background color, etc) that would be awesome!

shiny r
2 Answers

I did it outside Shiny in this fiddle that allows you to experiment with Bootstrap (which is the underlying basis of shinyBS).

I used this CSS.

<style>
    .panel-heading .panel-title a.collapsed:after {
      transform: rotate(180deg);
      transition: .5s ease-in-out;
    }
    .panel-heading .panel-title a:after {
      content:'⏶';
      text-align: right;
      float:right;
      transition: .5s ease-in-out;
    }
    .panel-heading .panel-title a:not([class]):after {
      transform: rotate(180deg);
    }
</style>

The CSS uses the :after selector to place an arrow (as content) behind and displays it on the right-hand side of the panel (i.e. float and text-align). The other two specs a:not([class]) and a.collapsed make sure that the arrow always points into the right direction. The transitions are for show.

Place this CSS inside a tags$head element (instructions here) and it should style your panels accordingly. The head of your sample app should look like this:

shinyApp(
  ui =
    fluidPage(
      tags$head(
        # Note the wrapping of the string in HTML()
        tags$style(HTML("
          <!-- PUT THE CSS HERE without the surrounding <style> tag -->
        ")),
      bsCollapse(id = "coll...

I admit I haven't tested it in a Shiny environment (only in the bootstrap fiddle). But since shinyBS is only a wrapper for Bootstrap it should work.

user_132415450

You can also just put a fontawesome icon next to the title "Panel 1" and "Panel 2".

library(shinyBS)
library(shiny)
shinyApp(
  ui =
    fluidPage(
      bsCollapse(
        id = "collapseExample", open = c("panel 1, panel 2"),
                 bsCollapsePanel(
                  title = div("Panel 1", icon("angle-down")), "First panel content",
                                 style = "info"),
                 bsCollapsePanel(
                   title = div("Panel 2", icon("angle-down")), "Second panel content",
                                 style = "warning"))
    ),
  server = 
    function(input, output, session){
      
    }
)
user_91232710
Related