jqueryhtmljquery-uihtml5boilerplate

JQuery UI: Accordion is not a functon


ANSWER:

It turns out that that at the bottom of the HTML generated by HTML5 boileplate there is a call to the CDN for JQuery, so it unloaded JQuery UI.

I've got a HTML5 Boilerplate project that will eventually be served via Django. For the time being I'm just trying to get my front-end looking nice.

I've got JQuery and JQuery UI linked in my but and JQuery functions look like they're working but for some reason it refuses to acknowledge that accordion exists. I get "Uncaught TypeError: $(...).accordion is not a function"

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>DaCara</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function(){
      $(".news_container").accordion();
    });
    </script>
</head>

Div definition:

            <div class="news_container">
          <h3>Test News, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test News2, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test News3, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test New4, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
        </div>

Solution

  • Are you sure this is what you have? At minimum, jQuery would return a jQuery collection containing the matched elements. Even if it doesn't find anything, it'll still return that collection, albeit an empty one. Even empty, accordion() should still be callable. The conclusion is that $() isn't returning a jQuery collection. This implies you have some kind of typo in there or that jQuery isn't being attached to $. Though how this might happen but still allow the onready shorthand is a mystery.

    A jsfiddle demonstrating this is here. Note that despite no content, accordian() works without issue.