how do i render output (e.g. plots) in different custom written navs/tabs in a shiny app?

[anon73295571]

I would like to build something that equals the functionality of the shiny functions navbarPage() and navbarMenu() to split my app into different sections with different plots etc.. However when you run the example app below, you will notice that plot in the first tab (NAVONE - which is not hidden by default) will get rendered by click the corresponding link, but the plot in the second tab (NAVTWO) will not get rendered by clicking the corresponding link. Its not clear to me what differs both tabs.

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)
}

Are there generally some information on the web that gives me some insight how shiny functions especially navbarPage() and navbarMenu() work under the hood?