CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Muhamad Yulianto
Muhamad Yulianto

Reputation: 1663

JQuery UI some function error TypeError: $(...).accordion is not a function

I try to following another ask thread in stackoverflow but nothing result, i got error TypeError: $(...).accordion is not a function when use accordion function, but for other function JQuery UI like "effect", its working well.

This is my code

<h3>Our Product</h3>
<div id="accordion">
  <div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>
</div>
</div>

in my head.php file, and both of jquery and jquery ui loaded succesfull

<title><?php echo $title;?> | Mitra Dekor</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/bootstrap.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/font-awesome.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/owl_003.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/owl.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/owl_002.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/fonts.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/mitradekor.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css/jquery-ui');?>/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css');?>/tooltipster.css" type="text/css">
<link rel="stylesheet" href="<?php echo base_url('assets/css/themes');?>/tooltipster-light.css" type="text/css">
<script src="<?php echo base_url('assets/js');?>/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="<?php echo base_url('assets/js');?>/jquery-ui.js" type="text/javascript"></script>

<script src="<?php echo base_url('assets/js');?>/jquery.contenthover.min.js" type="text/javascript"></script>

And this is my js code, i use external file and put it in footer

$( function () {
$(".owl-carousel").each(function() {
$(this).owlCarousel({
  items: 10,
  singleItem: true,
  autoPlay: true,
  stopOnHover: true,
  transitionStyle: true
 });
});

 **$( "#accordion" ).accordion({
  heightStyle: "content"
 });**
 });

Is there something wrong with my code?

Update this is jsfidlle http://jsfiddle.net/a0jzt46p/

Thankyou

Upvotes: 0

Views: 4501

Answers (3)

Keval Bhatt
Keval Bhatt

Reputation: 6322

example: http://jsfiddle.net/kevalbhatt18/5Lxcz2rj/

I changed jquery-ui.js because in your js .accordion function is missing so i changed .js and .css file see reference Jquery-ui-accordion

And i changed your id in html because don't provide same id to two element in one page 

<h3>Our Product</h3>
    <div id="accordion">
      <div id="accordion1">
      <h3>Section 1</h3>...
      ........................

Upvotes: 0

Muhammad Ali
Muhammad Ali

Reputation: 698

When you go to download jQuery UI, it offers you to select all the options that you want. Make sure you selected accordion in it. Or you can use a CDN with the full file: https://code.jquery.com/ui/1.11.3/jquery-ui.min.js

Using that file got it working for me but you have another problem. There are 2 divs with ID #accordion. Removing one, and using the full UI file fixed the code. Here's an updated jsfiddle: http://jsfiddle.net/a0jzt46p/1/

I removed your OwlCarousel function for the purpose of testing.

Upvotes: 1

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

May be it relates to whether jquery.ui library can't getting load properly or issue with the function try this with simple code first and check out whether you find issue

Upvotes: 0

Related Questions