I would like to build something that equals the functionality of the shiny functions navbarPage() and navbarMenu(). However when I create two different tabs (NAVONE and NAVTWO in my app below) I am able to render output within the first tab (which is not hidden by default), but not able to render output within the second tab. Its not clear to me what differs between both content sections.
library(shiny)
if (interactive()) {
options(device.ask.default = FALSE)
ui = fluidPage(
###NAVBAR
tags$div(class = 'nav',
tags$button('NAVONE', class = 'navlinks', id = "defaultOpenNav", onclick = 'openNav(event, "NAVONE")'),
tags$button('NAVTWO', class = 'navlinks', onclick = 'openNav(event, "NAVTWO")')),
###NAVCONTENT
tags$div(class = 'navcontent', id = 'NAVONE',
actionLink(inputId = "actnOne", "click to create plot for nav one"),
plotOutput(outputId = "plotOne")),
tags$div(class = 'navcontent', id = 'NAVTWO',
actionLink(inputId = "actnTwo", "click to create plot for nav two"),
plotOutput(outputId = "plotTwo")),
###JAVASCRIPT
tags$script(HTML(
"function openNav(evt, NavToOpen) {
// Declare all variables
var i, navcontent, navlinks;
// Get all elements with class = 'navcontent' and hide them
navcontent = document.getElementsByClassName('navcontent');
for (i = 0; i < navcontent.length; i++) {
navcontent[i].style.display = 'none';
}
// Get all elements with class = 'tablinks' and remove the class 'active'
document.getElementById(NavToOpen).style.display = 'block';
evt.currentTarget.className += ' active';
}
// navcontent to be open by default
document.getElementById('defaultOpenNav').click();"
))
)
server = function(input, output, session){
###PLOT FOR NAV ONE
observeEvent(input$actnOne, {
output$plotOne = renderPlot({
hist(iris$Sepal.Length)
})
})
###PLOT FOR NAV TWO
observeEvent(input$actnTwo, {
output$plotTwo = renderPlot({
hist(iris$Sepal.Length)
})
})
}
shinyApp(ui, server)
}