1

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.

|improve this question
2

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.

|improve this answer
  • I found the problem. There was an exceedingly minor typo in the path to the jQuery UI js file. Thanks. – fmz Mar 3 '11 at 17:10
1

One reason could be not including javascripts properly in your application.js (if you are using rails 3)

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

Line 3 is required for accordion to load. (Line 3 : //= require jquery-ui)

|improve this answer
0

Most likely your reason is because you have not include the jquery.ui.widget.js dependency (per the list of dependencies on the accordion page). Try including that first. You can do this via your jQuery UI download. Make sure when you download it, you have selected the widget component (under 'Core').

|improve this answer
0

This problem could arise from a couple of different things:

  • You are not including jQuery UI library.
  • You are including jQuery UI library above the inclusion of jQuery library
  • The path to jQuery UI and jQuery libraries might be incorrect
  • You are using a custom jQuery UI library that does not have an accordion
|improve this answer

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.