Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

232
Views
How do I render output (e.g. plots) in different custom written navs/tabs in a shiny app?

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)
}
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!