You are here:

$("#accordion").accordion is not a function

This Comment will be submitted for moderation and will not be accessible to other users until it has been approved.

Hi Guys,

I am loading Jquery and using the code below and no matter what I try I keep getting $("#accordion").accordion is not a function error in my firebug.

  <script type="text/javascript">
    $('#accordion > ul').accordion({ 
  clearStyle: true,
  autoHeight: false
}).bind("accordionchange", function(event, something, ui) {
      alert("hello");
  console.dir(ui.newHeader); // jQuery, activated header
  console.log(ui.newHeader[0].id); //this has the id attribute of the header that was clicked
  doSomething(ui.newHeader[0].id);
});
 
var doSomething = function(paneId) {
  $('#' + paneId).html('My dog\'s breath smells like dog food');
};
 
    </script>

           <div id="accordion">
 <ul id="files-accordion" class="ui-accordion-container" style="padding-top: 10px; width: 550px; clear: both;">
   <li><a href="#" class="ui-accordion-link">Jquery Accordion Item 1</a>
     Jquery Accordion Item 1
   </li>
   <li><a href="#" class="ui-accordion-link">Jquery Accordion Item 2</a>
     Jquery Accordion Item 2
   </li>
   <li><a href="#" class="ui-accordion-link">Jquery Accordion Item 3</a>
     Jquery Accordion Item 3
   </li>
 </ul> 
</div>

1 year 42 weeks ago Tags:

Did you load your Jquery javascript in document.ready? Look below:

 <script type="text/javascript">
    $(document).ready(function () {
    $('#accordion > ul').accordion({ 
  clearStyle: true,
  autoHeight: false
}).bind("accordionchange", function(event, something, ui) {
      alert("hello");
  console.dir(ui.newHeader); 
  console.log(ui.newHeader[0].id); 
  doSomething(ui.newHeader[0].id);
});
 }); 
var doSomething = function(paneId) {
  $('#' + paneId).html('My dog\'s breath smells like dog food');
};
 
    </script>

Created by Anonymous

reply
Reset vote
7 points

Did you load jquery.accordion-1.2.2.js in your head after loading jquery.js:

 <script type="text/javascript" src="/ajax/misc/jquery-1.2.6.js"></script>
 <script type="text/javascript" src="/ajax/misc/jquery.accordion-1.2.2.js"></script>

Created by Anonymous

reply
Reset vote
-20 points

Finally, the code below worked:

<html>
 
<head>
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
 
 
 
    <script type="text/javascript">
  $(document).ready(function () {
$('#accordion > ul').accordion({ 
  clearStyle: true,
  autoHeight: false
}).bind("accordionchange", function(event, ui) {
  alert(ui.newHeader[0].id);
 console.dir(ui.newHeader); // jQuery, activated header
  console.log(ui.newHeader[0].id); //this has the id attribute of the header that was clicked
  doSomething(ui.newHeader[0].id);
 
});
var doSomething = function(paneId) {
  $('#' + paneId).html('My dog\'s breath smells like dog food');
};
 });
 
    </script>
</head>
<body>
            <div id="accordion">
 <ul id="files-accordion" class="ui-accordion-container" style="padding-top: 10px; width: 550px; clear: both;">
  <li><a href="#" class="ui-accordion-link">Jquery Accordion Item 1</a>
     Jquery Accordion Item 1
   </li>
   <li><a href="#" class="ui-accordion-link">Jquery Accordion Item 2</a>
     Jquery Accordion Item 2
   </li>
   <li><a href="#" class="ui-accordion-link">Jquery Accordion Item 3</a>
     Jquery Accordion Item 3
   </li>
 </ul> 
</div>
 
</body>
</html>

Created by Anonymous

reply
Reset vote
5 points

Objective C Tutorial

Linux Tutorial

Java Tutorial

JavaScript Tutorial

Ruby Tutorial

HTML Tutorial

HTML5 Tutorial

C++ Tutorial

Drupal Tutorial

Perl Tutorial

PHP Tutorial

CSS Tutorial

Relevant Tutorials

$("#accordion").accordion is not a function

Post Comment