Please don't get mad at me, although I'm sure I deserve it if you do...

I have tried to take some content (within div tags) that was on a subpage and "convert" it to an accordion that opens upon hovering over an individual item, all in wordpress. jQuery has the code for this already available, so although I'm very new to WP I thought I'd try it. I took the .js files that jQuery's code was referencing and I put them on my server, and then added the following pieces of code to my header.php:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/jquery-ui.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.hoverIntent-1.8.0.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui.js"></script>

I got these files from this page: http://jqueryui.com/accordion/#hoverintent

My question is, if I simply copy/paste the entire html script that is on the jQuery website onto a page on my site, that page displays my menu/theme incorrectly. I believe that I need to somehow "call" to the javascript without putting the following directly on the top of the page's html:

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
  $(function() {

Here's my page: http://phdfinancialllc.com/blog/test-page/

If you click on the logo in the upper left hand corner, you can see that every other page displays properly, it's just the js code on this page is interfering with my main files.

Thank you for your help.