Is there a way we can distinguish parent accordions from nested accordions in css without using ids?

[Shelmith-Kariuki]

Hi

A colleague and I are building a super awesome shiny app that contains several bslib accordions, some of which are nested within parent accordions.
We want to have it that the color styles of the accordions are different depending on whether they are open or collapsed. More specifically, for parent accordions, we want the background to be green and the text to be white when the accordion is collapsed, and vice versa when open. We want the same styling pattern for nested accordions, only that we want to use maroon and white instead of green and white. This way, it's easy to distinguish between parent accordions and nested one. We could use ids to distinguish the two but the app is huge and we keep changing our module names and ids to make the code neat. We don't want to keep editing the css file. We are hoping that there is a way to use classes that would apply to all accordions of a similar type (parent or nested).

The code below represents a dummy app I've created to demonstrate the intended color system. Accordion 3 has three nested accordions within it.

I have three questions:

1. Is there a better way to style the accordions without using raw css? maybe with an inbuilt bslib function?
2. Is there a way (using css classes) to distinguish parent accordions from nested ones, without specifically using ids?
3. How can I edit the code below so that we have different colors i.e green and white for main accordions and maroon and white for nested accordions?

library(shiny)
library(bslib)

## In this dummy app, we have three accordions. Accordion 3 consists of nested accordions.
## We are trying to figure out a way to style the accordions differently, depending on whether they are nested or
## not.
## Please see the css code included in app_ui

mod_acc_UI <- function(id) {
  ns <- NS(id)
  tagList(
    bslib::accordion(
      open = FALSE,
      id = ns("main_accordion"),
      ## Accordion 1
      bslib::accordion_panel(
        title = "Accordion 1",
        value = "accordion_1"
      ),
      ## Accordion 2
      bslib::accordion_panel(
        title = "Accordion 2",
        value = "accordion_2"
      ),
      ## Accordion 3 is a parent accordion that contains 3 nested accordions
      bslib::accordion_panel(
        title = "Accordion 3",
        value = "accordion_3",
        bslib::accordion(
          id = ns("accordion3_with_nested_accordions"),
          bslib::accordion_panel(
            title = "Nested accordion 1",
            value = "nested_accordion_1"
          ),
          bslib::accordion_panel(
            title = "Nested accordion 2",
            value = "nested_accordion_2"
          ),
          bslib::accordion_panel(
            title = "Nested accordion 3",
            value = "nested_accordion_3"
          )
        )
      )
    )
  )
}

mod_acc_Server <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      ns <- session$ns
    }
  )
}


app_ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(
        "
        /* Parent accordions */

        /* Accordions should have a green background with white text when collapsed*/
          .accordion-button.collapsed{
            color: white;
            background-color: green;
            }

        /*Accordions should have white background with green text when not collapsed*/
          .accordion-button:not(.collapsed) {
            color: green;
            background-color: white;
          }

      /*Nested accordions */

      /* Accordions should have a maroon background with white text when collapsed*/
      .accordion-button.collapsed{
        color: white;
        background-color: maroon;
        }

      /*Accordions should have white background with maroon text when not collapsed*/
    .accordion-button:not(.collapsed) {
      color: maroon;
      background-color: white;

    }"
      )
    )
  ),
  theme = bslib::bs_theme(version = 5),
  mod_acc_UI("test")
)

app_server <- function(input, output, session) {
  mod_acc_Server("test")
}

shinyApp(
  ui = app_ui,
  server = app_server
)

[gadenbuie]

You can use the CSS selector .accordion .accordion to target an accordion nested within another accordion. So you can use rules like this to get the appearance you'd like:

/* Nested accordions */

/* Indent titles of nested accordions */
.accordion .accordion .accordion-button {
  padding-inline-start: 2rem;
}

/* Accordions should have a maroon background with white text when collapsed*/
.accordion .accordion .accordion-button.collapsed {
  color: white;
  background-color: maroon;
}

/* Accordions should have white background with maroon text when not collapsed*/
.accordion .accordion .accordion-button:not(.collapsed) {
  color: maroon;
  background-color: white;
}

Also, you can use some Bootstrap utility classes to improve the appearance of the nested accordions. In the third accordion_panel() use class = "p-0" and in the nested accordion use class = "accordion-flush" so that the nested accordion fills its parent accordion panel. I also added padding to the nested accordion button (first rule above) so that it's clear that the nested panels are children.

Here's an example app on shinylive.io.

Example app

library(shiny)
library(bslib)

## In this dummy app, we have three accordions. Accordion 3 consists of nested accordions.
## We are trying to figure out a way to style the accordions differently, depending on whether they are nested or
## not.
## Please see the css code included in app_ui

mod_acc_UI <- function(id) {
  ns <- NS(id)
  tagList(
    accordion(
      open = "accordion_3",
      id = ns("main_accordion"),
      ## Accordion 1
      accordion_panel(
        title = "Accordion 1",
        value = "accordion_1"
      ),
      ## Accordion 2
      accordion_panel(
        title = "Accordion 2",
        value = "accordion_2"
      ),
      ## Accordion 3 is a parent accordion that contains 3 nested accordions
      accordion_panel(
        title = "Accordion 3",
        value = "accordion_3",
        class = "p-0",
        accordion(
          id = ns("accordion3_with_nested_accordions"),
          class = "accordion-flush",
          open = FALSE,
          accordion_panel(
            title = "Nested accordion 1",
            value = "nested_accordion_1"
          ),
          accordion_panel(
            title = "Nested accordion 2",
            value = "nested_accordion_2"
          ),
          accordion_panel(
            title = "Nested accordion 3",
            value = "nested_accordion_3"
          )
        )
      )
    )
  )
}

mod_acc_Server <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      ns <- session$ns
    }
  )
}


app_ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("
/* Parent accordions */

/* Accordions should have a green background with white text when collapsed*/
.accordion-button.collapsed {
  color: white;
  background-color: green;
}

/*Accordions should have white background with green text when not collapsed*/
.accordion-button:not(.collapsed) {
  color: green;
  background-color: white;
}

/* Nested accordions */

/* Indent titles of nested accordions */
.accordion .accordion .accordion-button {
  padding-inline-start: 2rem;
}

/* Accordions should have a maroon background with white text when collapsed*/
.accordion .accordion .accordion-button.collapsed {
  color: white;
  background-color: maroon;
}

/* Accordions should have white background with maroon text when not collapsed*/
.accordion .accordion .accordion-button:not(.collapsed) {
  color: maroon;
  background-color: white;
}
     ")
    )
  ),
  theme = bs_theme(version = 5),
  mod_acc_UI("test")
)

app_server <- function(input, output, session) {
  mod_acc_Server("test")
}

shinyApp(
  ui = app_ui,
  server = app_server
)

[Shelmith-Kariuki]

Hi @gadenbuie ,

Thank you so much. Your solution works perfectly.

I'll use the same piece of code to ask a follow up question (#1109).