Home/ Questions/Q 4037298
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T12:19:50+00:00

I am adding jQuery UI Accordion to a page and get an error in

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0