CODEWITHSUNDEEP
jqueryjquery-ui
forrest
forrest

Reputation: 11012

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.

Upvotes: 1

Views: 14540

Answers (4)

Desi
Desi

Reputation: 375

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.

Upvotes: 2

martynas
martynas

Reputation: 12290

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

Upvotes: 0

crazycrv
crazycrv

Reputation: 2445

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)

Upvotes: 1

JasCav
JasCav

Reputation: 34652

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').

Upvotes: 0

Related Questions