jQuery accordion not working when used in plugin

I am writing a plugin which requires an accordion. I know my js is enqueueing correctly as I can test with basic ‘hello world’ js function and all is ok.

The jQuery I am using for the accordion is very basic:

jQuery(document).ready(function($) {
  $( "#cjmaccordion" ).accordion({
  collapsible: true, active: false, heightStyle: "content"
  });
});

The HTML is just copied from the jQuery website:

<div id="cjmaccordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Some text 1.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Some text 2.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
        Some text 3.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Some text 4.
    </p>
  </div>
</div>

The HTML displays on a page ok and I can change the CSS associated with it – I just can’t get the accordion to work.

Chrome says the following:

Uncaught TypeError: $(…).accordion is not a function
at HTMLDocument.<anonymous> (cjm-contacts-scripts.js?ver=5.6:8)
at e (jquery.min.js?ver=3.5.1:2)
at t (jquery.min.js?ver=3.5.1:2)

I am developing the plugin on a local ubuntu server. I am using Elementor to edit the pages. My theme is OceanWP – which is set as a child theme.

Does anyone have any suggestions that I might try?

Many thanks.