Solve - $(...).accordion is not a function jQuery Error

Solve - $(...).accordion is not a function #

The "$(...).accordion is not a function" jQuery error occurs for multiple reasons:

Forgetting to include the jQuery UI library.
Loading the jQuery UI library before the jQuery library.
Loading the jQuery library twice.
Specifying an incorrect path to the jQuery files.
Loading a custom version of the jQuery UI library that doesn't include an accordion.

jquery accordion is not a function error

To solve the "$(...).accordion is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- ✅ Load CSS file for jQuery ui  -->
    <link
      href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="accordion">
      <h3>Section 1</h3>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
          et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
      </div>
      <h3>Section 2</h3>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
          commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
          et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
      </div>
    </div>

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load jQuery UI ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="index.js"></script>
  </body>
</html>

The order we loaded the external libraries in is very important.

The order is the following:

Load the CSS file for the jQuery UI library
Load the jQuery library
Load the jQuery UI library
Run our own script (index.js)

Here's the code for the index.js file.

index.js

Copied!
$(document).ready(function () {
  $('#accordion').accordion();
});

We waited for the DOM to be ready before rendering the accordion. If you open your browser, you'll see the accordion.

jquery accordion

If you are still getting the error, make sure that you're not loading the jQuery UI script before loading jQuery and you're not loading the jQuery library twice.

Loading the library twice, re-runs the initialization process and causes the error.

You might also be using some custom version of the jQuery UI library that doesn't include an accordion.

If you are loading the libraries from files on your local file system, make sure to specify the paths to the files correctly. Specifying an incorrect path to a script is equivalent to not loading the script at all.

You can check if you're loading the scripts correctly when you open the console in your browser. If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

Solve - $(...).accordion is not a function jQuery Error

Solve - $(...).accordion is not a function #

Borislav Hadzhiev