Question 44759 in Html Question posted in
Some basic documentation can be found here.

how to display only one table at a time when using buttons – Html

I am working with R markdown and I have many different tables and I added a button for each table but for some reason when I first open the file all tables display until I click on a button. How can I fix this? I would like to see only one table whenever I first open the file.

enter image description here

<script type="text/javascript">
 function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 }
 
 function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}
 
</script>



#### Division 1

<div style="padding-left:125px;">


<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Albany')">Albany</button>
  <button class="tablinks" onclick="openTab(event, 'Buffalo')">Buffalo</button>
  <button class="tablinks" onclick="openTab(event, 'LongIsland')">Long Island</button>
  <button class="tablinks" onclick="openTab(event, 'Rochester')">Rochester</button>

</div>

<div id="Albany" class="tabcontent">
  <p>
  
**Albany** 

|**Rank**| **City** | **No. Customers** |
|:------:|:--------:|:------------------:|
|1       | Albany   | 183   |
|2       | Schenectady   | 133   |
|3       | Clifton Park   |  124  |
|4       | Ballston Spa   |  88  |

</span>
</div>
</a>

<div id="Buffalo" class="tabcontent">
  <p>
  
**Buffalo**

|**Rank**| **City** | **No. Customers** |
|:------:|:--------:|:------------------:|
|1       | Buffalo   | 1098   |
|2       | Hamburg   | 293   |
|3       | Lancaster   |  235  |
|4       | Lockport   |  213  |

</span>
</div>
</a>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    added a functiuon showhide

    <script type="text/javascript">
  window.onload = function() {
    
    var tabContents = document.getElementsByClassName("tabcontent");
    for (var i = 1; i < tabContents.length; i++) {
      tabContents[i].style.display = "none";
    }
  };
  
  function showhide(id) {
    var e = document.getElementById(id);
    e.style.display = (e.style.display == 'block') ? 'none' : 'block';
  }
  
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }
</script>

  2. 0

    A simple approach to this is to insert some CSS to say your tabcontent items are not displayed, e.g.

    <style>
.tabcontent {
  display:none
}
</style>

    Put this before the tables and none of them will be displayed. If you want one displayed initially (e.g. Albany), then modify the first line of that table to include style="display:block", i.e.

    <div id="Albany" class="tabcontent" style="display:block">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search