accordion

**js_newbie_80** · 06-30-2012 09:54 AM

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

HTML Code:

<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

HTML Code:

<!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

HTML Code:

#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

Code:

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

});

and here' a preview http://antobbo.webspace.virginmedia....rdion/test.htm

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

**chrisranjana** · 06-30-2012 10:20 PM

Try

HTML Code:

	<head>
		<title>test</title>
		<link rel = "stylesheet" type = "text/css" href = "style.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type = "text/javascript">

$(document).ready(function(){


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

});
	</script>
		
	</head>

**js_newbie_80** · 07-01-2012 06:34 AM

Hi there, thanks for that, I have just tried it, but it doesn't work I am afraid. Firebug doesn't report any error anymore but the script still doesnt work.
I don't quite understand what it could be wrong with the script...

I then tried with a slightly modified version of it:
$(document).ready(function(){
$("ul#main_list a.header").click(function(){
$(this).children("ul").children("li").slideToggle();

});

});

but it doesn't work either

**chrisranjana** · 07-01-2012 11:17 AM

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

My reply was aimed at your above question only.

**js_newbie_80** · 07-01-2012 11:32 AM

Oh I see. I think i sorted the script needs to be

Code:

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

});

Thread: accordion

Thread Tools

Display

accordion

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions