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

Question

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.

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

You should post a complete document that we can work with. When I try what you have here, I just get an error that `openTab()` is not defined. Presumably the answer is that the `openTab()` function sets some attribute on the one that matches, and the opposite attribute on the ones that don't. So all tables (or all but one) should be initialized to not display. — user2554330, Feb 27 '23 at 19:12
I can't find the `openTab` command anywhere in the `r-markdown` documentation... — Mister Jojo, Feb 27 '23 at 19:14
Is there a table preceded by that; `
`? if this is the case then it is not valid, HTML writing rules prohibit the use of space characters for IDs, even if browsers allow it. see https://stackoverflow.com/questions/9285451/handling-css-id-and-classes-with-spaces/9285481#9285481 — Mister Jojo, Feb 27 '23 at 23:19

score 0 · Answer 1 · answered Feb 27 '23 at 19:34

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>

why add this `showhide` function? if you don't explain in what context it's used, it doesn't make sense to us — Mister Jojo, Feb 27 '23 at 22:27
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 03 '23 at 14:42

score 0 · Answer 2 · answered Feb 27 '23 at 19:55

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">

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

2 Answers2