Q:

JQuery - Loads both elements on page load

I've used some jQuery to hide and show certain elements on my page. However, on page load they both show. Then when you interact with the menu/options, it works as expected. 
I don't want them both to show and when I've used this code before, but I've added 
Any help would be appreciated.
Here is the behaviour:
https://gyazo.com/2798001dacc2daf353d845050872a3a0
Here is the jQuery: 
<script type="text/javascript">
$(document).ready(function () {
    $('#menu').on('click', 'a', function (e) {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        $('.pbox:visible').hide(600);
        $('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
        e.preventDefault();
    });
});
</script>

Here is the html:
<ul id="menu" >
                        <li class="current profile-menu center"><a href="#" class="profile-links" data-id="div1"><h2 class="profile-menu">Info</h2></a></li>
                        <h2 class="profile-menu" style="padding-left:6px;padding-right:6px;font-size:15px;"><span>|</span></h2>
                        <li class="profile-menu center"><a href="#" class="profile-links" data-id="div2"><h2 class="profile-menu">Stats</h2></a></li>
                    </ul>

<div class="pbox" id="div1">
                        <table class="stat-list">
                            <tbody>
                                {% if driver.fullNationality %}
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Nationality</span>
                                    </th>
                                    <td class="stat-value">{{ driver.fullNationality }}</td>
                                </tr>  
                                {% endif %} 
                                {% if driver.age %}
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Age</span>
                                    </th>
                                    <td class="stat-value">{{ driver.age }}</td>
                                </tr>  
                                {% endif %}  
                                {% if driver.placeofbirth %}
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Born</span>
                                    </th>
                                    <td class="stat-value">{{ driver.placeofbirth }}</td>
                                </tr>  
                                {% endif %} 
                                {% if driver.lives %}
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Lives</span>
                                    </th>
                                    <td class="stat-value">{{ driver.lives }}</td>
                                </tr>  
                                {% endif %}
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Height</span>
                                    </th>
                                    <td class="stat-value">5ft 11</td>
                                </tr>   
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Weight</span>
                                    </th>
                                    <td class="stat-value">175lbs</td>
                                </tr> 
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Highest race finish</span>
                                    </th>
                                    <td class="stat-value">1 (x64)</td>
                                </tr>       
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Date of birth</span>
                                    </th>
                                    <td class="stat-value">07/01/1985</td>
                                </tr>   
                                <tr>
                                    <th scope="row" class="stat-key">
                                        <span class="text">Place of birth</span>
                                    </th>
                                    <td class="stat-value">Stevenage, England</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                        <div class="pbox" id="div2">                        
                            <table class="stat-list">
                                <tbody> 
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Team</span>
                                        </th>
                                        <td class="stat-value">Mercedes</td>
                                    </tr>     
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Wins</span>
                                        </th>
                                        <td class="stat-value">1</td>
                                    </tr>      
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Podiums</span>
                                        </th>
                                        <td class="stat-value">3</td>
                                    </tr>  
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Points</span>
                                        </th>
                                        <td class="stat-value">2730</td>
                                    </tr>   
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">GP's entered</span>
                                        </th>
                                        <td class="stat-value">11</td>
                                    </tr>   
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Championships</span>
                                        </th>
                                        <td class="stat-value">0</td>
                                    </tr> 
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Highest race finish</span>
                                        </th>
                                        <td class="stat-value">1 (x64)</td>
                                    </tr>
                                    <tr>
                                        <th scope="row" class="stat-key">
                                            <span class="text">Highest grid position</span>
                                        </th>
                                        <td class="stat-value">1</td>
                                    </tr>        
                                </tbody>
                            </table>
                        </div>

A:

Here's how I would do this:

$('#menu').on('click', '.profile-tab:not(.current)', function (e) {
    $('.profile-menu').removeClass('current');
    $(this).addClass("current");
    $('.pbox:visible').hide(600);
    $('.pbox[id=' + $(this).find('.profile-links').attr('data-id') + ']').show(600);
    e.preventDefault();
});
.profile-menu {
  display:inline-block;
}

.profile-tab a h2 {
  background-color:lightgray;
  border-radius:10px;
  padding:3px 5px;
}
.profile-tab.current a h2 {
  background-color:#005dff;
  color:white
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu" >
     <li class="profile-tab profile-menu current center">
        <a href="#" class="profile-links" data-id="div1"><h2 class="profile-menu">Info</h2></a>
     </li>
     <h2 class="profile-menu" style="padding-left:6px;padding-right:6px;font-size:15px;"><span>|</span></h2>
     <li class="profile-tab profile-menu center">
        <a href="#" class="profile-links" data-id="div2"><h2 class="profile-menu">Stats</h2></a>
     </li>
</ul>

<div class="pbox" id="div1">
    <table class="stat-list">
        <tbody>
            {% if driver.fullNationality %}
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Nationality</span>
                </th>
                <td class="stat-value">{{ driver.fullNationality }}</td>
            </tr>  
            {% endif %} 
            {% if driver.age %}
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Age</span>
                </th>
                <td class="stat-value">{{ driver.age }}</td>
            </tr>  
            {% endif %}  
            {% if driver.placeofbirth %}
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Born</span>
                </th>
                <td class="stat-value">{{ driver.placeofbirth }}</td>
            </tr>  
            {% endif %} 
            {% if driver.lives %}
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Lives</span>
                </th>
                <td class="stat-value">{{ driver.lives }}</td>
            </tr>  
            {% endif %}
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Height</span>
                </th>
                <td class="stat-value">5ft 11</td>
            </tr>   
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Weight</span>
                </th>
                <td class="stat-value">175lbs</td>
            </tr> 
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Highest race finish</span>
                </th>
                <td class="stat-value">1 (x64)</td>
            </tr>       
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Date of birth</span>
                </th>
                <td class="stat-value">07/01/1985</td>
            </tr>   
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Place of birth</span>
                </th>
                <td class="stat-value">Stevenage, England</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="pbox" id="div2" style="display:none">                        
    <table class="stat-list">
        <tbody> 
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Team</span>
                </th>
                <td class="stat-value">Mercedes</td>
            </tr>     
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Wins</span>
                </th>
                <td class="stat-value">1</td>
            </tr>      
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Podiums</span>
                </th>
                <td class="stat-value">3</td>
            </tr>  
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Points</span>
                </th>
                <td class="stat-value">2730</td>
            </tr>   
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">GP's entered</span>
                </th>
                <td class="stat-value">11</td>
            </tr>   
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Championships</span>
                </th>
                <td class="stat-value">0</td>
            </tr> 
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Highest race finish</span>
                </th>
                <td class="stat-value">1 (x64)</td>
            </tr>
            <tr>
                <th scope="row" class="stat-key">
                    <span class="text">Highest grid position</span>
                </th>
                <td class="stat-value">1</td>
            </tr>        
        </tbody>
    </table>
</div>

