• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 703
  • Last Modified:

Jquery Accordion

Can anybody tell me why this accordion menu isn't working? Im using the latest release of Jquery and the accordion UI plugin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>jQuery Accordion Example</title>
	
	<style type="text/css">
		/* A few IE bug fixes */
		* { margin: 0; padding: 0; }
		* html ul ul li a { height: 100%; }
		* html ul li a { height: 100%; }
		* html ul ul li { margin-bottom: -1px; }
		
		body { padding-left: 10em; font-family: Arial, Helvetica, sans-serif; }
		#theMenu { width: 200px; height: 350px; margin: 30px 0; padding: 0; }
		
		/* Some list and link styling */
		ul li { width: 200px; }
		ul ul li { border-left: 25px solid #69c; padding: 0; width: 175px; margin-bottom: 0; }
		ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
		ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
		/* For the xtra menu */
		ul ul ul li { border-left: none; border-bottom: 1px solid #eee; padding: 0; width: 175px; margin-bottom: 0; }
		ul ul ul li a { display:block; color: #000; padding: 3px 6px; font-size: small; }
		ul ul ul li a:hover { display:block; color: #369; background-color: #eee; padding: 3px 8px; font-size: small; }
		
		
		li { list-style-type: none; }
		h2 { margin-top: 1.5em; }
		
		/* Header links styling */
		h3.head a { 
		color: #333;
		display:block; 
		border-top: 1px solid #36a;
		border-right: 1px solid #36a;
		background: #ddd url(down.gif) no-repeat; 
		background-position: 98% 50%;
		padding: 3px 6px;
		}
		h3.head a:hover { 
		color: #000;
		background: #ccc url(down.gif) no-repeat; 
		background-position: 98% 50%;
		}
		h3.selected a { 
		background: #69c url(up.gif) no-repeat; 
		background-position:98% 50%;
		color: #fff;
		padding: 3px 6px;
		}
		h3.selected a:hover { 
		background: #69c url(up.gif) no-repeat; 
		background-position:98% 50%;
		color: #36a;
		}
		
		/* Xtra Header links styling */
		h4.head a { 
		color: #333;
		display:block; 
		border-top: 1px solid #36a;
		border-right: 1px solid #36a;
		background: #eee url(down.gif) no-repeat; 
		background-position: 98% 50%;
		padding: 3px 6px;
		}
		h4.head a:hover { 
		color: #000;
		background: #ddd url(down.gif) no-repeat; 
		background-position: 98% 50%;
		}
		h4.selected a { 
		background: #6c9 url(up.gif) no-repeat; 
		background-position:98% 50%;
		color: #fff;
		padding: 3px 6px;
		}
		h4.selected a:hover { 
		background: #6c9 url(up.gif) no-repeat; 
		background-position:98% 50%;
		color: #36a;
		}
	</style>
	<script type="text/javascript" src="js/latest.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript">
$(function(){	
	// applying the settings
	$('#theMenu').Accordion({
		active: 'h3.selected',
		header: 'h3.head',
		alwaysOpen: false,
		animated: true,
		showSpeed: 400,
		hideSpeed: 800
	});
	$('#xtraMenu').Accordion({
		active: 'h4.selected',
		header: 'h4.head',
		alwaysOpen: false,
		animated: true,
		showSpeed: 400,
		hideSpeed: 800
	});
});

</script>
</head>
<body>
		<ul id="theMenu">

			<li>
				<h3 class="head"><a href="javascript:;">Title 1</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 1 1</a></li>
					<li><a href="index-multi.php">Content 1 2</a></li>
					<li><a href="index-multi.php">Content 1 3</a></li>
				</ul>

			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 2</a></h3>
				<ul>
					<li>
                    	<ul id="xtraMenu">
                        	<li>
                                <h4 class="head"><a href="javascript:;">Content xtra 2 1a</a></h4>

                                <ul>
                                    <li><a href="index-multi.php">Content 2 1 1</a></li>
                                    <li><a href="index-multi.php">Content 2 1 2</a></li>
                                    <li><a href="index-multi.php">Content 2 1 3</a></li>
                                </ul>
                            </li>
                            <li>

                                <h4 class="head"><a href="javascript:;">Content xtra 2 1b</a></h4>
                                <ul>
                                    <li><a href="index-multi.php">Content 2 2 1</a></li>
                                    <li><a href="index-multi.php">Content 2 2 2</a></li>
                                    <li><a href="index-multi.php">Content 2 2 3</a></li>
                                </ul>
                            </li>

                        </ul>
                    </li>
					<li><a href="index-multi.php">Content 2 2</a></li>
					<li><a href="index-multi.php">Content 2 3</a></li>
				</ul>
			</li>
			<li>
				<h3 class="head"><a href="javascript:;">Title 3</a></h3>

				<ul>
					<li><a href="index-multi.php">Content 3 1</a></li>
					<li><a href="index-multi.php">Content 3 2</a></li>
					<li><a href="index-multi.php">Content 3 3</a></li>
				</ul>
			</li>
			<li>

				<h3 class="head"><a href="javascript:;">Title 4</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 4 1</a></li>
					<li><a href="index-multi.php">Content 4 2</a></li>
					<li><a href="index-multi.php">Content 4 3</a></li>
				</ul>
			</li>

			<li>
				<h3 class="head"><a href="javascript:;">Title 5</a></h3>
				<ul>
					<li><a href="index-multi.php">Content 5 1</a></li>
					<li><a href="index-multi.php">Content 5 2</a></li>
					<li><a href="index-multi.php">Content 5 3</a></li>
				</ul>

			</li>
		</ul>
	</body>
</html>

Open in new window

0
dextermorgan
Asked:
dextermorgan
  • 2
  • 2
  • 2
  • +1
1 Solution
 
magedroshdyCommented:
please attache accordion.js
0
 
vineethvpCommented:
Hope u have included/integrated the below files into your code.

      <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
      <script type="text/javascript" src="../../ui/ui.core.js"></script>
      <script type="text/javascript" src="../../ui/ui.accordion.js"></script>
      <link type="text/css" href="../demos.css" rel="stylesheet" />

Thankz
0
 
dextermorganAuthor Commented:
magedroshdy: Find attached accordion.js.

vineethvp: I didn't include these as they were not part of the tutorial i was following. I have now included them, but it still doesn't seem to be working.
accordion.js
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
vineethvpCommented:
From where did u download the code ie, latest jquery ?
0
 
magedroshdyCommented:
it is working perfect on my side, kindly make sure that the path of the js files are correct. check attached file
accordion.zip
0
 
dextermorganAuthor Commented:
thanks - don't know what the problem was, but using the files supplied worked fine.
0
 
twalker916Commented:
$('#theMenu').Accordion({

should be
 
      $('#theMenu').accordion({

the method should be all lowercase
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now