homepage Welcome to WebmasterWorld Guest from 54.145.183.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
accordion
dupalo



 
Msg#: 4471332 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4471332 posted 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#: 4471332 posted 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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4471332 posted 12:31 pm on Jul 1, 2012 (gmt 0)

In your click handler function, this refers to the <a> element.

dupalo



 
Msg#: 4471332 posted 8:18 pm on Jul 13, 2012 (gmt 0)

I see thanks

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved