fmz fmz - 1 month ago 11
jQuery Question

jQuery UI error message: #accordion is not a function

I am adding jQuery UI Accordion to a page and get an error in firebug when the page loads saying

#accordion is not a function


Here is the jquery code:

<script type="text/javascript">
$(document).ready(function() {
$("a.view-preview").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("#accordion").accordion({ header: "h3", collapsible: true, active: false });
$("a.show-categories").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>


Here is the html code:

<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>


Here is the header from the page that loads:

<head>


<!-- meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Rouviere Media - web design and development" />
<meta name="keywords" content="web design, development, expression engine, cms, forrest anderson, donna anderson" />
<meta name="robots" content="index, follow" />

<!-- title -->
<title>Expression Engine, Web Design and Development | Rouviere Media</title>

<meta name="viewport" content="width=device-width" />

<!-- css -->
<link rel="shortcut icon" href="http://ee.rouviere.com/_images/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="http://ee.rouviere.com/_css/rou_inside_styles.css"/>
<link rel="stylesheet" type="text/css" media="all" href="http://ee.rouviere.com/_css/web-custom/jquery-ui-1.8.10.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="http://ee.rouviere.com/fancybox/jquery.fancybox-1.3.4.css"/>

<!--[if IE 7]> <link href="http://ee.rouviere.com/_css/rou_ie7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="site_url}_css/rou_ie8.css" rel="stylesheet" type="text/css" /><![endif]-->

<!-- js -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ee.rouviere.com/_js/jquery-ui-1.8.10.min.js"></script>
<script type="text/javascript" src="http://ee.rouviere.com/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.view-preview").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("#accordion").accordion({ header: "h3", collapsible: true, active: false });
$("a.show-categories").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});

</script>
</head>


I would appreciate some guidance here. Thanks.

Answer

You do have both the JQuery UI library and the JQuery library lodad? If not then you should make sure that both the framework and JQuery UI js files are in your header;

https://jqueryui.com/accordion/

See the source code as an example.