change header in bslib accordion css

[brad_schrage]

Hi, I'm new to css in Shiny. The bslib package makes it easy to use accordions. I'm trying to change the padding-top on accordion item A to 0. I'm unsure where you would put this in the shiny app.

• can you do this inline?
• is it better to do this in a style sheet?
• How do you select id1 alone and not select all class accordion-header?

Here's the basic code:

library(shiny)
library(bslib)



library(shiny)
library(bslib)

ui <- page_fluid(
    accordion(id = 'id1',accordion_panel("Section A", "Some narrative for section A")),
    accordion(id = 'id2', accordion_panel("Section B", "Some narrative for section B"))
 
)

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

shinyApp(ui, server)

[ismirsehregal]

This can be done via htmltools::tagQuery or htmltools::tagAppendAttributes:

# bslib::accordion is not on CRAN yet
# remotes::install_github('rstudio/bslib')

library(shiny)
library(bslib)
library(htmltools)

ui <- page_fluid(
  tagQuery(accordion(id = 'id1', accordion_panel("Section A", "Some narrative for section A")))$find("button")$addAttrs("style" = "padding-top:0px;")$allTags(),
  # alternative:
  # tagAppendAttributes(accordion(id = 'id1', accordion_panel("Section A", "Some narrative for section A")), .cssSelector = ".accordion-button", style = "padding-top:0px;"),
  accordion(id = 'id2', accordion_panel("Section B", "Some narrative for section B"))
)

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

shinyApp(ui, server)

Useful links regarding tagQuery:

Using tagQuery() to query and modify HTML tags

Chapter 2 Manipulate HTML tags from R with {htmltools} | Outstanding User...

[brad_schrage]

Thank you so much! this really puts me on the right path to read about this. Thanks for the suggestions.