jQuery UI: TypeError: $(...).accordion is not a function

Question

For some reason the jQuery UI Accordion does not work. I keep getting this error:

TypeError: $(...).accordion is not a function

What am i doing wrong? Based on other answers on this site on similar topics, i think it has something to do with the included files.

My header includes are:

<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

<!-- CSS -->
<link rel="stylesheet" href="<?php echo base_url(); ?>css/base_con.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/skeleton.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/layout.css">

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="shortcut icon" href="<?php echo base_url(); ?>images/favicon.ico">
<link rel="apple-touch-icon" href="<?php echo base_url(); ?>images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/custom-theme/jquery-ui-1.10.0.custom.css" type="text/css" />

<!-- Scripts -->
<script src="<?php echo base_url(); ?>js/jquery-1.9.0.js"></script>
<script src="<?php echo base_url(); ?>js/jquery-ui-1.10.0.custom.js"></script>
<script src="<?php echo base_url(); ?>js/responsiveslides.min.js" type="text/javascript">

Cream

Does your custom jqueryui actually include the accordion plugin? – Afield

Make sure the path to your jQuery core file and jQuery UI file are correct. Have a look in Firebug or some other console tool to make sure thay are loading. – Yun

thanks Richard, fixed it :) – Cream

Answer 1

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

Since the first two do not apply to you, I would recommend triple-checking the path and using a full jQuery UI library instead of the custom one:

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

Athematic

Thanks! I didn't realize the jQuery UI library had to be included after the jQuery one. – Deluxe

Answer 2

Using two jquery.js files may cause a conflict and result in an errorbeing thrown. Avoid importing two or more jquery.js files.

Kristinkristina

Thank you for adding this - was my problem. Silly mistake - but I was looking for the wrong thing before you noted this. – Ultraism

Answer 3

in your last code lines, include the script in below order :-

There is no need to include the below as it will be taken care by above scripts.

Competition

Answer 4

The order of the js files matters!

/external/jquery/jquery.js should be listed above jquery-ui.js!

Coincidence

Answer 5

I had the same problem on a WordPress website. I added it in the header. Use <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Deanndeanna

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Cravens