using JQuery in ProBoards - Help Received/Finished!

[witherbones]

Hello!

I'm trying to learn coding, and am now learning some basic javascript and JQuery. I have a very simple code that, when using my generator, works fine, but when placed into my headers for my site, do not work correctly.

My Site:
abelastation.boards.net/index.cgi

CSS:
a:hover{
   -webkit-box-shadow: 0 0 8px #FFD700;
   -moz-box-shadow: 0 0 8px #FFD700;
   box-shadow: 0 0 8px #FFD700;
   cursor:pointer;
}
.panel {
background: #ffffbd;
   background-size:90% 90%;
   height:300px;
display:none;
   font-family:garamond,times-new-roman,serif;
}
.panel p{
   text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #cc0000;
}
.pull-me {
display:block;
   position:relative;
   right:-25px;
   width:150px;
   height:20px;
font-family:arial,sans-serif;
   font-size:14px;
color:#ffffff;
   background:#cc0000;
text-decoration:none;
   -moz-border-bottom-left-radius:5px;
   -moz-border-bottom-right-radius:5px;
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
}
.pull-me p {
   text-align:center;
}
HTML:
<div class="panel">
       <br />
       <br />
       <p>Now you see me!</p>
</div>
<p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p>

JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$('.pull-me').click(function(){
$('.panel').slideToggle('slow');
});
});
</script>
Now, basically what I am trying to get this code to do at this point is when you click on "Slide Up/Down", the div ".panel" will slide down and reveal it's secrets. However, by visiting my site and testing this out, you can see that this, for whatever reason, does not work.

Now, I am not used to using JQuery etc. outside of the generator, so there could be half a million reasons why this doesn't work outside of it. I was wondering if you lovely gentleman and ladies could help me discover why. All help is greatly appreciated.

Thank you,
WitherBones

[Tumbleweed]

You need to add a link to the jquery library. You can get it here:

encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

I'll be the 2nd one down. (edit: 2nd one down enclosed in a box) Put it at the top of your header.

[witherbones]

I've placed this in my header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Is this the correct one?

If it is, unfortunately, the code still is not working :C

Edit: actually, I failed to notice the headers/footers hadn't authenticated properly when I wrote that. I got the headers and footers properly updated with the JQuery database added, and the code now functions. I greatly appreciate your help!

[Tumbleweed]

That's good to hear. Happy to have helped.