Hide nav link if no content is in div

Question

I have a section for testimonials that will be populated from a Google sheet and I want to hide the nav link for that until there are testimonials to show. I am using SheetsDB to link the Google Sheet and pull in that content.

I am using basic Bootstrap nav:

<div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="<?php echo esc_url(home_url('/')); ?>">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url(site_url('/#whyus')); ?>">Why Choose Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url(site_url('/#ourservices')); ?>">Our Services</a>
                  </li>
                    <li class="nav-item">
                    <a class="nav-link" href="<?php echo esc_url(site_url('/#testimonials')); ?>">Testimonials</a>
                  </li>
                </ul>
              </div>

And basic Bootstrap cols for the testimonials:

<div class="container">
        <div class="row">
            <div class="col-12">
                <h1><?php echo $testimonial_title; ?></h1>
            </div>
            <div class="col-md-4">
                <p><?php echo $testimonial_1; ?></p>
                <p><?php echo $testimonial_name_1; ?></p>
            </div>
            <div class="col-md-4">
                <p><?php echo $testimonial_2; ?></p>
                <p><?php echo $testimonial_name_2; ?></p>
            </div>
            <div class="col-md-4">
                <p><?php echo $testimonial_3; ?></p>
                <p><?php echo $testimonial_name_3; ?></p>
            </div>
        </div>
    </div>

Is it possible to hide the testimonial link until there is content to show in that section?

Thanks

Craig

Answer 1

You can use onload method for link that you pull from google sheet.

 //initially hide document.getElementById("navbarNav").style.display = "none"; //display if conent loaded from link document.getElementById("linkid").addEventListener("load", navShowOnLoadTestimonials); function navShowOnLoadTestimonials() { document.getElementById("navbarNav").style.display = "block"; }

Another method is to use setTimeout to display nav link after some interval of time.

 document.getElementById("navbarNav").style.display = "none"; setTimeout(function(){ document.getElementById("navbarNav").style.display = "block"; }, 3000);