New to this web developer thing, and I'm looking for some help. I'm re-designing my portfolio website and instead of using a bunch of different static pages, I'm looking to use a tabbed set up to switch between content areas. I want to use the JQuery UI tabs function to do this. I want to click on a heading, and have the content in that tab active, while the other content is hidden until you click on the next tab. Below is the script I'm using:

Code:
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
The problem I am having is that, when I click the different headings in the tabbed menu at the top of my page, the content doesn't change, nor does it hide any of the other tabbed content. It's all there, all the time.

Example:
JQuery UI Site
Notice how, when you click the different tabs, it hides the content from the non-active ones. That is my desired end result.

My Page
Notice how all the content is there as soon as the page loads. The tabs I am referring to are the horizontal ones underneath the header image.

I haven't altered the source code any other than the "Styles.CSS" to pass in my style sheet. I've gone through my HTML a few times to see if I'm missing things. I've cleaned it up and both the HTML and the CSS does pass W3c Validation. Not sure where to go from here. Thanks in advance!