tabs widget showing content from all tabs

tabs widget showing content from all tabs

Using JQM 1.4.5 with JQ 2.1.4

I have a really basic tab control, it has three divs and no matter how much clicking I do on the tab/navbar portion the content of all three divs is constantly displayed. JQM doesn't seem to be adding any classes to/from the content divs.

Am I missing something here? (Well obviously I am, but what? 

My includes are:
  1. <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
    <script src="jquery.mobile/jquery-2.1.4.min.js"></script>
  2. <script src="jquery.mobile/jquery.mobile-1.4.5.min.js"></script>

My HTML is:
  1.   <div id="creditsPage" data-role="page"  data-theme="b" data-quicklinks="true">
        <div role="main" class="ui-content">
        <!-- Start of tabs navbar --> 
        <div data-role="tabs"> 
          <div data-role="navbar">
            <ul>
              <li><a href="#" class="ui-btn-active" data-href="buymore">Buy More</a></li>
              <li><a href="#" data-href="transfer">Transfer</a></li>
              <li><a href="#" data-href="history">History</a></li>
            </ul>
          </div>
          <div id="buymore" class="tab-content">
              <p>Pick your package:</p>
              <p>3 credits = $0.99</p>
          </div>
          <div id="transfer" class="tab-content">
              <p>Donate credits.</p>
              <p>Send credits to a friend.</p>
          </div>
          <div id="history" class="tab-content">
              <p>History</p>
              <p>Starter allotment: 3</p>
          </div>
        </div>
        <!-- end of tabs widget -->
        </div> <!-- end of main -->
        <div data-role="footer" data-position="fixed" data-theme="b">
          <h1>Credits Page</h1>
        </div><!-- /footer --> 
      </div> <!-- end of page -->

My JS is:
  1.   $("#credits").enhanceWithin().tabs();