Tabs show too much content only on load, self fixes after click

Question

I have a tab set up in a Bootstrap modal that loads with tab 2 content shown directly below tab 1's content, and I can't for the life of me figure out why. I know it's not a problem with the modal, or a php misstep, as I was able to recreate the problem in this fiddle after taking most of the content out.

Now the strange thing is, once you click on another tab the whole thing works just as it should. No extra content, even if you go back to tab 1.

This is the shortened version of my code:

$(document).ready(function () {

        $('ul.tabs li').click(function () {
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })

    })

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 1em;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
}

ul.tabs li {
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current {
    background: #eaeaea;
    color: #222;
    border-radius: 5px 5px 0 0;
}

.tab-content {
    display: none;
    background: #eaeaea;
    padding: 15px;
    font-size: 1em;
    font-family: 'Roboto Condensed', sans-serif;
    border-radius: 5px 0 5px 5px;
}

.tab-content.current {
    display: block;
    overflow: auto;
    width: 100%;
    margin-bottom: 20px;
    min-height: 300px;
}

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="jobModalLabel"><strong>Job 123</strong></h4>
</div>
<div class="modal-body">
   body is here....Tabs down below-

    <!--Tabs-->
    <div class="col-lg-12">
        <br/>
        <ul class="tabs text-right">
            <li class="tab-link current" data-tab="tab-1">Outlook</li>
            <li class="tab-link" data-tab="tab-2">Parts On Order</li>
            <li class="tab-link" data-tab="tab-3">Labor</li>
            <li class="tab-link" data-tab="tab-4">Parts</li>
            <li class="tab-link" data-tab="tab-5">Notes</li>
        </ul>

        <div id="tab-1" class="tab-content current">
            Tab 1 Conent
        </div>

        <div id="tab-2" class="tab-content current">
            Tab 2 content
        </div>
        <div id="tab-3" class="tab-content">
            Tab 3 content
        </div>
        <div id="tab-4" class="tab-content">
            Tab 4 Content            
        </div>
        <div id="tab-5" class="tab-content">
            Tab 5 content
        </div>
        <!--/Tabs-->
        <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <a href="editjob.php?id=<?php echo $id; ?>">
            <button type="button" class="btn btn-warning pull-left">Edit Job</button>
        </a>
        <a href="printjob.php?id=<?php echo $id; ?>">
            <button type="button" class="btn btn-primary">Print Job</button>
        </a>
    </div>

Any ideas on what could be causing this?

Answer 1

You've given the "current" class to both tab-1 and tab-2. Remove it from tab-2 and it will display correctly.

Fiddle

    <div id="tab-1" class="tab-content current">
    ...
    <div id="tab-2" class="tab-content">

Answer 2

The click handler determines what happens when you click a tab, but it doesn't run right away.

You can fix this by explicitly triggering a click on the first tab after you've defined the click handler:

$(document).ready(function () {
  $('ul.tabs li')
    .click(function () {
      var tab_id = $(this).attr('data-tab');

      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current');

      $(this).addClass('current');
      $("#" + tab_id).addClass('current');
    })
    .first()
    .click();
});

Working Fiddle