Cant transfer my jquery effect onto wordpress

Hi Guys,

I have created a very simple effect for a list that displays the players names on my football club website. Each players name is a link that i want to show a player bio underneath their name once clicked.

I have got this working on a blank test page but i cannot transfer this over to wordpress.

All help would be greatfully recieved.

This is the javascript used in the header.php head section
Code:

$(function() {
      $("li.profile a").click(function(e) {
       $(e.target).closest("li").find("p").toggle();
        return false;
        })
});

My HTML code that i have added to my page
Code:

<ul >
   <li class="profile">
      <a href="#">Section 1</a>
      <p style="display: none;">
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
      ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
      amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
      odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
      </p>
   </li>
   <li class="profile">
   <a href="#">Section 2</a>
      <p style="display: none;">
      Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
      purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
      velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
      suscipit faucibus urna.
      </p>
   </li>
</ul>