2

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

Community
  • 1
  • 1
Joanna
  • 663
  • 7
  • 21
  • 1
    Please provide a minimal reproducible example. You can likely solve this with JavaScript and CSS `display:none` without using `shinyjs`. – Xiongbing Jin Nov 08 '16 at 00:05
  • Thanks Xiongbing Jin! I solved this issue by adding tags$div( id="haha",menuItem()) to the menuItems that I want to control and adding observeEvent(input$showSidebar,{shinyjs::toggle("haha")}) to control them. – Joanna Nov 09 '16 at 21:30

1 Answers1

5

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.

user5249203
  • 4,436
  • 1
  • 19
  • 45
Joanna
  • 663
  • 7
  • 21
  • 3
    Thanks for sharing your solution. If you wanted to solve it without having to wrap it in another div, it should be possible by using the `selector` param instead of the `id` param in `toggle()`, but I wouldn't be able to tell you what to use as the `selector` value without seeing a fully reproducible example with working code – DeanAttali Nov 11 '16 at 20:20
  • Thank you @daattali so much! I will definitely try more possibilities! – Joanna Nov 13 '16 at 17:22
  • 2
    To save those who are trying to make Dean's suggestion work some time: jquery selectors are explained here pretty well: [jquery selectors](https://www.w3schools.com/jquery/jquery_ref_selectors.asp). Any of the selectors can be addressed by the argument in toggle: `selector="jquery selector"` – SprengMeister Jul 10 '17 at 18:41
  • Thanks @SprengMeister, I will definitely check it out! – Joanna Jul 11 '17 at 21:58
  • example for selector: `shinyjs::toggle(selector = "ul li:eq(0)", anim = TRUE)` This toggles the first menuItem in the sidebar. – Urvah Shabbir Aug 20 '18 at 20:17
  • Strangely I land up on this thread after so many years. Seems there is no clear documentation yet how to hide/ show a sidebar menu item in shinydashboard. My attempts to use `tags$div()` and then enclosing the entire block with `hidden()` and then use `shinyjs::showelement()` from the server side, gives me partial success...it land me to a displaced sidebar menu, functionally working but CSS is spoilt. – Lazarus Thurston Aug 26 '21 at 11:59