Keep html tab open while using ajax query inside tab

Ok, so I am trying to pull up user information on the same page using ajax when I click the username button. (and yes, I'm kinda a noob in the ajax/javascript department) That part is working fine. However, I wanted to create tabs for the user that will populate with the specific user info. What I'm having a hard time with is when I click on one of the user buttons, ALL the tabs start off closed. I can't figure out how to have the first tab open by default. I feel like this should be super simple, but I'm not seeing it. Here is what I have so far:


<?php include("settings.php");
include("func.php"); ?>

<button onclick="showUser(1)">User 1 </button><br>
<button onclick="showUser(2)">User 2 </button><br>
<button onclick="showUser(3)">User 3 </button>

<div id="txtHint">Placeholder Content</div>

<?php include("footer.php"); ?>


table {
    width: 100%;
    border-collapse: collapse;

table, td, th {
    border: 1px solid black;
    padding: 5px;

th {text-align: left;}

$q = intval($_GET['q']); 

if (!$connect) {
    die('Could not connect: ' . mysqli_error($connect));
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

<div id="London" class="tabcontent">
        $sql="SELECT * FROM charge WHERE charge_tenant = '".$q."'";
        $result = mysqli_query($connect,$sql);
              echo "<table>
                    <th>Original Amount</th>
                    <th>Amount Paid</th>
                    <th>Open Balance</th>
                    while($row = mysqli_fetch_array($result)) {
                        echo "<tr>";
                        echo "<td>" . moneyformat($row['charge_amount']) . "</td>";
                        echo "<td>" . moneyformat($row['charge_paid']) . "</td>";
                        echo "<td>" . moneyformat($row['charge_unpaid']) . "</td>";
                        echo "</tr>";
                    echo "</table>";

<div id="Paris" class="tabcontent">
  <p>Paris is the capital of France.</p> 

<div id="Tokyo" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>


function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;

function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";

I believe the problem is possibly with the placement of <script>document.getElementById("defaultOpen").click();</script>, but I have not idea where else to put it to make it work...


So, after hours of trying to make it work, I finally figured it out. It was incredibly simple. On my getuser.php page I simply changed <div id="London" class="tabcontent"> to <div id="London" class="tabcontent" style="display:block">. I feel silly now, but hopefully this helps someone in the future.