accordion

Hi guys, I am trying to develop a small simple accordion withuot plug in (I know there are jquery plug ins but I would like to do my own) but I am having some troubles. There must be an error in the code because firebug comes back with this message:

$ is not defined
[Break On This Error] $(document).ready(function(){

as jquery I am using

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
 </script>

Here's the code I came up with;
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>test</title>
 <link rel = "stylesheet" type = "text/css" href = "style.css">
 <script type = "text/javascript" src = "script.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 </head>
 
<body>
 <div id = "accordion">
 <ul id = "main_list">
 <li><a href = "#" class = "header">Today</a>
 <ul>
 <li>apples</li>
 <li>pears</li>
 <li>banabas</li>
 </ul>
 </li>
 <li><a href = "#" class = "header">Yesterday</a>
 <ul>
 <li>fish</li>
 <li>pork</li>
 <li>beef</li>
 </ul>
 </li>
 <li><a href = "#" class = "header">Day before yesterday</a>
 <ul>
 <li>beans</li>
 <li>peas</li>
 <li>lettuce </li>
 </ul>
 </li>
 </ul>
 </div>
 </body>
 </html>

CSS

#accordion
{
border:1px solid red;
width:500px;
height:500px;
margin:0 auto;
}

#main_list
{
border:3px solid blue;
}

ul#main_list, #main_list ul
{
list-style:none;
}

#main_list li a
{
text-decoration:none;
color:black;
font-size:150%;
}

#main_list li a:hover
{
background-color:red;
}

#main_list > li > ul > li
{
display:none;
}

JQUERY

$(document).ready(function(){
$("ul#main_list a.header").click(function(){
$(this).children("ul").slideToggle();

});

});

Now, I know many of you will say that there are better ways to do that, but because I am a beginner I came up with this way to do it, and I wonder whether there is any silly error I am making that is preventing the script from working
any help is much appreciated
thanks

accordion

dupalo

Fotiman

dupalo

Fotiman

dupalo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week