| accordion
|
dupalo
msg:4471334 | 7:09 pm on Jun 30, 2012 (gmt 0) |
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
|
Fotiman
msg:4471340 | 8:13 pm on Jun 30, 2012 (gmt 0) |
You've included the jquery script AFTER your script which tries to use it. Include jquery first.
|
dupalo
msg:4471485 | 11:53 am on Jul 1, 2012 (gmt 0) |
Hi Fotiman, thanks for that I didn't notice that, sorry! I have done what you suggested so that the jquery script is called first and then my script after that. THe good news is that firebug doesn't report any error anymore: the bad one is that the script still doesn't work
|
Fotiman
msg:4471488 | 12:31 pm on Jul 1, 2012 (gmt 0) |
In your click handler function, this refers to the <a> element.
|
dupalo
msg:4475493 | 8:18 pm on Jul 13, 2012 (gmt 0) |
I see thanks
|
|
|
