Question 45792 in CSS Question posted in
Some basic documentation can be found here.

Change color of shiny tab conditional on another tab being active – CSS

Is there a way of changing the text color of a tab in shiny conditional on another tab being active? I know how to change the text color of the selected tab, but I want to also change the color of another specific tab at the same time.

For example, in the minimal example below, I would like to highlight both Tabs 2 and 3 labels in red whenever Tab 2 is selected:

# ui
ui <- navbarPage(
  id = "navbar",
  tags$style(HTML(".tabbable > .nav > li > a {color:blue}
                    .tabbable > .nav > li[class=active] > a {color:red}")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
              )
  )

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

shinyApp(ui, server)

I imagine this is easily achieved, but I’m a CSS beginner. Any help would be much appreciated!

Tags:

2

Answers


  1. 0

    Not sure I understand your question, but if I understand it this is what you want:

    css1 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
"

css2 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
.tabbable > .nav > li > a[data-value=tab3] {color: red;}
"

# ui
ui <- navbarPage(
  id = "navbar",
  uiOutput("CSS"),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  )
)

# server
server <- function(input, output, session) {
  
  output[["CSS"]] <- renderUI({
    css <- ifelse(input[["tabs"]] == "tab2", css2, css1)
    tags$style(HTML(css))
  })
  
}

shinyApp(ui, server)
    Login or Signup to reply.
  2. 0

    The easiest (and fastest) way to do this is with a bit of JavaScript

    library(shiny)

ui <- navbarPage(
  id = "navbar",
  tags$style(HTML("
    .tabbable > .nav > li > a {color:blue}
    .tabbable > .nav > li.active > a {color:red}
    .tabbable > .nav > li > a.red_panel {color:red}
  ")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  ),
  
  # We could also append the style directly using .css()
  tags$script(HTML("
    $('#tabs').on('shiny:inputchanged', function(event) {
      console.log(event.value)
      if (event.value === 'tab2') {
        $('a[data-value = "tab3"]').addClass('red_panel');
      } else {
        $('a[data-value = "tab3"]').removeClass('red_panel');
      };
    });
  "))
)

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

shinyApp(ui, server)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search