programmatically switching between right sidebar tabs (and rintrojs)

[DavidPatShuiFong]

Is it possible to 'manually' (from within the server component) switch between tabs in the right sidebar?

There are handy hints on how to force open the right sidebar e.g.

shinyjs::addClass(selector = "body", class = "control-sidebar-open")

And I can switch the content of the right sidebar display using shinyjs, but the 'chosen' tab does not change e.g. if the 'rightsidebar-appointment' tab was selected, and I want to change to 'rightsidebar-date'

shinyjs::removeClass(selector = "#control-sidebar-rightsidebar-appointment-tab", class = "active") shinyjs::addClass(selector = "#control-sidebar-rightsidebar-date-tab", class = "active")

...but the above sadly only changes the right sidebar content, rather than the 'selection' of the tab (where the icons usually are).

Use case : use 'rintrojs' to highlight different tabs in the right sidebar.

[DavidPatShuiFong]

'Solved' this issues by using shiny::tabsetPanel/shiny::tabPanel instead of shinydashboardPlus::rightsidebarTabContent.

Required some CSS-styling to make tabsetPanel look more like rightsidebarTabContent.

abbreviated example follows:

rightsidebar = shinydashboardPlus::rightSidebar( shiny::tags$head(shiny::tags$style(shiny::HTML( ".control-sidebar-tabs {display:none;} .tabbable > .nav > li > a:hover {background-color: #333e43; color:white} .tabbable > .nav > li[class=active] > a {background-color: #222d32; color:white}"))),

'{display:none;}' removes empty space at top of rightsidebar

https://stackoverflow.com/questions/59289622/

remove-the-dark-space-at-the-top-of-the-right-sidebar-in-a-shinydashboardplus

'.tabbable etc.' change tabpanel tab colouring on hover and active to be

more like shinydashboardPlus::rightSidebarTabContent

https://stackoverflow.com/questions/35025145/

background-color-of-tabs-in-shiny-tabpanel

https://stackoverflow.com/questions/47798850/

change-background-color-of-tabpanel-when-it-is-active-or-hover-over-in-shiny

background = "dark", shiny::tabsetPanel( shiny::tabPanel( shiny::icon("users"), value = "rightsidebar-appointment", shiny::br(), shiny::h4("Appointment Details"), shiny::br() ), shiny::tabPanel( shiny::icon("calendar-alt"), value = "rightsidebar-date", shiny::br(),shiny::h4("Selected date range"), shiny::br() ), shiny::tabPanel( shiny::icon("handshake"), value = "rightsidebar-contact", shiny::br(), shiny::h4("Contact details"), shiny::br() ) ) )

These tabs work with rintrojs. The tabs will auto-opened during the walkthrough with, for example :

rintrojs::introjs(session, options = list(steps = steps_overview()), events = list(onbeforechange = I("rintrojs.callback.switchTabs(targetElement)")))