Search code examples
cssrshinybslib

bslib rotating icon dependent on open state of panel


I have the following app that rotates a triangle icon upon opening/closing the bsCollapsePanel. However, it requires clicking on the title first from a closed state. It does not recognise the already open state upon initial loading. You have to close it and then open it to start activating the rotations. How could this be recognised from the outset?

I have a method to do this via the server. However, I am trying to perform it within the UI alone.

library(shiny)
library(bslib)

ui <- fluidPage(column(3,
  tags$head(
    tags$style(HTML("
     .panel-heading .panel-title a.collapsed:after {
      transform: rotate(90deg);
      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(90deg);
    }
        "))
)

,
bsCollapse(
  id = "tag_panel",
  open = 1,
  bsCollapsePanel(
    value = 1,
    "Title",
  p("content")
  )
)
)
)

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

shinyApp(ui, server)

Solution

  • I solved it with slight use of the server to get things started. It remains UI dependent thereafter:

    library(shiny)
    library(bslib)
    
    ui <- fluidPage(column(3,
                           tags$head(
                             tags$style(HTML("
         .panel-heading .panel-title a.collapsed:after {
          transform: rotate(90deg);
          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(90deg);
        }
            "))
                           )
        
        ,
        bsCollapse(
          id = "tag_panel",
          open = 0,
          bsCollapsePanel(
            value = 1,
            "Title",
            p("content")
          )
        )
    )
    )
    
    server <- function(input, output, session) {
      
      observe({
       shinyBS:: updateCollapse(session, "tag_panel", open = 1)
      })
    }
    
    shinyApp(ui, server)