HTML Tabs Is Not Working Sample

i want to display the data in tabs , but here my data is displaying in single tab. some one please help me out . here all the div data is displaying in the first tab , remaining d

Solution 1:

$( "#tabs" ).tabs();

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id='childarpt' class='childarpt' ></br>
  <div id="tabs"><ul>
  <li class="active"><a href="#Total"><span>Total</span></a></li>
  <li><a href="#USA"><span>USA</span></a></li>
  <li><a href="#ASIA"><span>ASIA</span></a></li>
  <li><a href="#JAPAN"><span>JAPAN</span></a></li>
  <li><a href="#LATAM"><span>LATAM</span></a></li>
  <li><a href="#EMEA"><span>EMEA</span></a></li>
  </ul>
  <table id='myTable' border='0'>

  <div id="Total" class="tab active">
  Total
  </div>
   <div id="USA" class="tab">
   USA
  </div>
  <div id="ASIA" class="tab">
    ASIA
  </div>
   <div id="JAPAN" class="tab">
   JAPAN
  </div>
   <div id="LATAM" class="tab">
   LATAM
  </div>
   <div id="EMEA" class="tab">
   EMEA
  </div>
 
  </table>
  </div>

Include jquery-lastest.js and jquery-ui.js file. DEMO HERE