title: Using Jquery tabs isn't working properly
body: <p>I have 3 different graphs I want to put in tabs and open when selected upon. I used a boostrap elements to make 3 of the graphs. I followed along the Jquery site and used that example and it isn't working how it should. For Example, when I click Tab 1 I want Graph one to appear. I've posted the code below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready(function(){
        
      $( '#tabs' ).tabs();
        
     });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col-md-1{       padding: 10px;
                   border:1px solid white;
           }
  #size {    padding: 10px;
              border:1px solid white;
              }
  #page{padding-bottom: 100px; 
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
    &lt;title&gt;CS2100 Project 3&lt;/title&gt;
      
  &lt;link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"&gt;
  
   &lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"&gt;
      
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
      
   &lt;link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"&gt;
          
   &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt; &lt;/script&gt;
      
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
    
      
  
    &lt;!-- Bootstrap --&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
    &lt;!-- Optional theme --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
    &lt;link rel="stylesheet" href="project3.css"&gt;
  
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
    &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
           
  &lt;/head&gt;
      
    &lt;body&gt;
          &lt;div id="main"&gt;
      &lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#part1"&gt;PART 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#part2"&gt;PART 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#part3"&gt;PART 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
        
          
      
        &lt;div class="container" id="part1"&gt;
            &lt;h3&gt;PART 1: 7-Day Forecast (HTML)&lt;/h3&gt;
          &lt;table class="table table-hover table-bordered text-center"&gt;
             &lt;tbody&gt;
              &lt;tr class="bg-primary text-primary"&gt;
                 &lt;th class="text-center"&gt;Forecast&lt;/th&gt;
                 &lt;th class="text-center"&gt;Thursday&lt;/th&gt;
                 &lt;th class="text-center"&gt;Friday&lt;/th&gt;
                 &lt;th class="text-center"&gt;Saturday&lt;/th&gt;
                 &lt;th class="text-center"&gt;Sunday&lt;/th&gt;
                 &lt;th class="text-center"&gt;Monday&lt;/th&gt;
                 &lt;th class="text-center"&gt;Tuesday&lt;/th&gt;
                 &lt;th class="text-center"&gt;Wednesday&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                 &lt;td&gt;High&lt;/td&gt;
                  &lt;td&gt;88&lt;/td&gt;
                  &lt;td&gt;81&lt;/td&gt;
                  &lt;td&gt;75&lt;/td&gt;
                  &lt;td&gt;83&lt;/td&gt;
                  &lt;td&gt;87&lt;/td&gt;
                  &lt;td&gt;90&lt;/td&gt;
                  &lt;td&gt;91&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                 &lt;td&gt;Low&lt;/td&gt;
                  &lt;td&gt;61&lt;/td&gt;
                  &lt;td&gt;59&lt;/td&gt;
                  &lt;td&gt;52&lt;/td&gt;
                  &lt;td&gt;57&lt;/td&gt;
                  &lt;td&gt;59&lt;/td&gt;
                  &lt;td&gt;63&lt;/td&gt;
                  &lt;td&gt;65&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                &lt;td&gt;Precip&lt;/td&gt;
                  &lt;td&gt;0%&lt;/td&gt;
                  &lt;td&gt;50%&lt;/td&gt;
                  &lt;td&gt;40%&lt;/td&gt;
                  &lt;td&gt;10%&lt;/td&gt;
                  &lt;td&gt;0%&lt;/td&gt;
                  &lt;td&gt;0%&lt;/td&gt;
                  &lt;td&gt;0%&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        
        
        
        &lt;div id="part2"&gt;
          &lt;div class="container" id="page"&gt;
       &lt;h3&gt;PART 2: 7-Day Forecast (Bootstrap Grid)&lt;/h3&gt;
       
             &lt;div class="row bg-primary text-primary"&gt;
                 &lt;div class="col-md-1 text-center"&gt;Forecast&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Thursday&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Friday&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Saturday&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Sunday&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Monday&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Tuesday&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;Wednesday&lt;/div&gt; 
                 &lt;div class="col-md-4 text-center" id="color"&gt;&lt;/div&gt; 
              &lt;/div&gt;
              
              &lt;div class="row bg-info text-info"&gt;
                 &lt;div class="col-md-1 text-center"&gt;0&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;88&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;81&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;75&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;83&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;87&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;90&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;91&lt;/div&gt;
                 &lt;div class="col-md-4 text-center" id="color"&gt;&lt;/div&gt; 
              &lt;/div&gt;
              
               &lt;div class="row bg-info text-info"&gt;
                 &lt;div class="col-md-1 text-center"&gt;Low&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;61&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;59&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;52&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;57&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;59&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;63&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;65&lt;/div&gt; 
                 &lt;div class="col-md-4 text-center" id="color"&gt;&lt;/div&gt; 
              &lt;/div&gt;
              
              &lt;div class="row bg-info text-info"&gt;
                 &lt;div class="col-md-1 text-center"&gt;Precip&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;0%&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;50%&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;40%&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;10%&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;0%&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;0%&lt;/div&gt;
                 &lt;div class="col-md-1 text-center"&gt;0%&lt;/div&gt; 
                 &lt;div class="col-md-4 text-center" id="color"&gt;&lt;/div&gt; 
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
              
         
        
  &lt;div id="part3"&gt;  
   &lt;div class="container" id="page"&gt;
       &lt;h3&gt;PART 3: TCP PACKET STRUCTURE&lt;/h3&gt;
       
     &lt;div class="row bg-primary text-primary"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;Byte#&lt;/div&gt;
    &lt;div class="col-md-3 text-center" id="size"&gt;+0&lt;/div&gt;
    &lt;div class="col-md-3 text-center" id="size"&gt;+1&lt;/div&gt;
    &lt;div class="col-md-3 text-center" id="size"&gt;+2&lt;/div&gt;
    &lt;div class="col-md-2 text-center" id="size"&gt;+3&lt;/div&gt;
   
     &lt;/div&gt;
       
       &lt;div class="row bg-info text-info"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;0&lt;/div&gt;
    &lt;div class="col-md-5 text-center" id="size"&gt;Source Port&lt;/div&gt;
    &lt;div class="col-md-6 text-center" id="size"&gt;Destination Port&lt;/div&gt;     
       &lt;/div&gt;
       
       &lt;div class="row bg-info text-info"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;4&lt;/div&gt;
    &lt;div class="col-md-11 text-center" id="size"&gt;Sequence Number&lt;/div&gt;
       &lt;/div&gt;
       
        &lt;div class="row bg-info text-info"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;8&lt;/div&gt;
    &lt;div class="col-md-11 text-center" id="size"&gt;ACK Number&lt;/div&gt;
        &lt;/div&gt;
       
        &lt;div class="row bg-info text-info"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;8&lt;/div&gt;
    &lt;div class="col-md-1 text-center" id="size"&gt;Offset&lt;/div&gt;
    &lt;div class="col-md-1 text-center" id="size"&gt;Reserved&lt;/div&gt;
    &lt;div class="col-md-5 text-center" id="size"&gt;Flags&lt;/div&gt;
    &lt;div class="col-md-4 text-center" id="size"&gt;Window Size&lt;/div&gt;
        &lt;/div&gt;
       
       &lt;div class="row bg-info text-info"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;16&lt;/div&gt;
    &lt;div class="col-md-5 text-center" id="size"&gt;Checksum&lt;/div&gt;
    &lt;div class="col-md-6 text-center" id="size"&gt;Urgent Pointer&lt;/div&gt;
       &lt;/div&gt;
       
       &lt;div class="row bg-info text-info"&gt;
    &lt;div class="col-md-1 text-right" id="size"&gt;20-56&lt;/div&gt;
    &lt;div class="col-md-11 text-center" id="size"&gt;Options&lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt; 
   
  
  
         
     
  
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
       
  
     
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>