Initial Page Load Shows contents of both tabs - html

Question

On initial load, the content from both tabs show on the webpage, once the tab is clicked for the first time they begin to work as expected.
Any ideas on why this is happening?
Here is my html
<div id="userFunctions" style="display: none;" >
<h2 id="welcome"></h2>
<button id="btnChangeUser" class="btn btn-primary" style="display: none;">Change User</button>
<br>
<hr>
<ul class="nav nav-tabs">
<li class="active"><a id="showSubs" data-toggle="tab" href="#subscriptionManagement">Subscription Portal</a></li>
<li><a id="showLocation" data-toggle="tab" href="#locationManagement">Location Management</a></li>
</ul>
<div class = tab-content>
<div id="subscriptionManagement" class="tab-pane fade in active">
<hr>
<section id="sendSubRequest">
<h4>Request Subscription</h4>
<div class="input-group">
<input type="text" id="subUserName" class="form-control "></input>
<span class="input-group-btn">
<button id="btnSubUser" class="btn btn-primary">Subscribe</button>
</span>
</div>
</section>
<br>
<section id="ReviewSubRequests">
<h4>Incoming Request(s)</h4>
<ul id='subscriptionsList'>
</ul>
</section>
</div>
<div id="locationManagement" class="tab-pane fade in active">
<hr>
<section id="cityDetails">
<section id="map">
</section>
<br>
<section>
<button id="btncheckInLocation" class="btn btn-primary">Check-In User location</button>
</section>
</section>
<section id="friendsList">
<h4>Subscribed Friends</h4>
<ul id='subscribedUsers'>
</ul>
</section>
</div>
</div>
</div>

Answer 1

Both your tabs (#subscriptionManagement and #locationManagement) have the active class, meaning they are both active by default. This class should be getting added on navigation, indicating that the content should be shown. You simply need to remove this class from the tab which you don't want to show on initial load:
Change:
<div id="locationManagement" class="tab-pane fade in active">
To:
<div id="locationManagement" class="tab-pane fade in">
Hope this helps! :)