Hide unused Tabs using Tab Widget?

Hide unused Tabs using Tab Widget?

I have dynamic content in a PHP page template using a CMS. Is there a way to hide empty tabs on the pages where not every tab has content?

my code is:

  2. <ul class="tabs print-no" data-persist="true">
  3. <li><a href="#view1">Overview</a></li>
  4. <li><a href="#view2">Experience</a></li>
  5. <li><a href="#view3">Publications</a></li>
  6. <li><a href="#view4">Community</a></li>
  7. <li><a href="#view5">Recognition</a></li>
  8. </ul>

  10. <div class="tabcontents">

  12. <div id="view1">
  13. <div class="noScreen">
  14. <h2>OVERVIEW</h2>
  15. </div>
  16. <?php the_field('overview'); ?>
  17. </div>

  19. <div id="view2">
  20. <div class="noScreen">
  21. <h2>EXPERIENCE</h2>
  22. </div>
  23. <?php the_field('experience'); ?>
  24. </div>

  26. <div id="view3">
  27. <div class="noScreen">
  28. <h2>PUBLICATIONS</h2>
  29. </div>
  30. <?php the_field('publications'); ?>
  31. </div>

  33. <div id="view4">
  34. <div class="noScreen">
  35. <h2>COMMUNITY</h2>
  36. </div>
  37. <?php the_field('community'); ?>
  38. </div>

  40. <div id="view5">
  41. <div class="noScreen">
  42. <h2>RECOGNITION</h2>
  43. </div>
  44. <?php the_field('recognition'); ?>
  45. </div>
  46. </div>