Dynamically show/hide input with shinyjs and flexdashbord

Question

Trying to update Sidebar in flexdashboard when click on a tab. Can't get it to work.

---
title: "Test Sidebar"
output: 
  flexdashboard::flex_dashboard:
     orientation: rows
 runtime: shiny
---

```{r setup}
library(flexdashboard)
library(shiny)
library(shinyjs)
useShinyjs(rmd = TRUE)
```
Sidebar {.sidebar data-width=250}
=======================================================================

```{r}
div(id = "one", selectInput("input1",label= "Show Always",choices=c("a","b","c")))    
div(id = "two",selectInput("input2",label = "Show only on Tab 1", choices=c("d","e","f")))
```

<!-- Update the sidebar based on the tab chosen. Generated HTML code shown for tabs-->

Tab 1 <!-- <a href="#section-tab-1" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```{r}
useShinyjs(rmd = TRUE)
shinyjs::onclick("#section-tab-2",shinyjs::hide(id = "two"))
shinyjs::onclick("#section-tab-1",shinyjs::show(id = "two"))
```

Tab 2 <!-- <a href="#section-tab-2" aria-expanded="true" data-toggle="tab"> -->
=======================================================================
```{r}
useShinyjs(rmd = TRUE)
actionButton("hideSlider", "Hide Input Two")
observeEvent(input$hideSlider, {
     shinyjs::toggle(id = "two", anim = TRUE)
    })
```

Works okay with actionButton() and observerEvent(). Any suggestions appreciated.

Answer 1

A few comments:

• You only need to call useShinyjs() once, no need to call it in every code chunk

• onclick() takes the ID of the element. Not the selector - the ID. This means that you call onclick("element") rather than onclick("#element")

• If you look at the HTML that gets generated by the dashboard, you'll see that there is no element with id "section-tab-2", so what you're trying to do won't work

• In regular shiny apps, when I use a tabsetPanel(), the way I do what you're trying to do is by using the value of the selected tab. Whenever a tab is selected, there's an input value that gives you the value of what is selected. I haven't used flexdashboard extensively so I'm not sure if there's a similar way to get the value of the selected tab in a flexdashboard.