Control visible/invisible of the menu items of shiny dashboard using "shinyjs" package

Can I friendly ask a question about “shinyjs” package?

I built a shiny dashboard and I would like to set a function using “shinyjs” to control the visible/invisible of menu items.

I designed the first menu item/page is to select the data for this dashboard. After the users selected the data they want, I don’t want them to go back to change their selection. So I want to design a button that if users click this button, the first menu item will disappear but the rest of the menu item will appear.

I am sure it is possible but I think it need some Javascript knowledge to code it.

It is just like the answer for this question but my is just toggling the visible/invisible of menu items.

activate tabpanel from another tabpanel

I appreciate any replies!

Thank you!

Joanna

Solution

I solved it by adding tags$div() for the items that I want to hide/show.

ui:

hidden(tags$div(
  class = "header",
  id = "haha",
  menuItem(
    tags$em("DIY Pivot Table", style = "font-size:170%"),
    icon = icon("bar-chart-o"),
    tabName = "Pivot"
  ),
  br(),
  menuItem(
    tags$em("Search Data", style = "font-size:170%"),
    icon = icon("bar-chart-o"),
    tabName = "searchdata"
  )
))

server:

observeEvent(input$showSidebar, {
shinyjs::toggle("haha")

})

So in this way, you can use the input$showSidebar to control visible/invisible of menu items.