CODEWITHSUNDEEP
javascriptjqueryaccordion
Hellyar
Hellyar

Reputation: 121

Accordion renders but is unresponsive

Another day, another challenge. This should be an easy one. I got the accordion to render, but it will not function. What am I doing wrong? I get an error "Can't find variable: jQuery". This refers to the last line of the accordion.min.js file which is }( jQuery, window, document);.

Here is the entire HTML.

<!DOCTYPE html>
<html>
        <title> Semantic UI - Accordian </title>
        <h1>Semantic UI Accordian - Not Working</h1>
        <hr>
        <p>The source semantic UI component files are correct. And I am loading the latest version of jQuery.  The Accordian renders, but it does not function.  What am I doing wrong?  I tried using the main semantic.js and semantic.css files - that encompasses all components, but this also did not work. </p>
        <br>
        <h3>Error Message in Safari Error Console</h3>
        <p> I only see one error.  It refers to the last line in the accordion.js or accordion.min.js file.  It reads "can't find variable jQuery".  and refers to a closing "}( jQuery, window, document);" statement.  I got the same error when trying to load an earlier version of jQuery 2.1.3.   What am I doing wrong?  </p>
        <head>
        <script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>
        <link rel="stylesheet" href="https://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.css">
        <script src="https://code.jquery.com/jquery-2.2.0.js"></script>  

    </head>
    <body>
            <div class="ui styled accordion">
              <div class="title">
                <i class="dropdown icon"></i>
                What is a dog?
              </div>
              <div class="content">
                <p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
              </div>
              <div class="title">
                <i class="dropdown icon"></i>
                What kinds of dogs are there?
              </div>
              <div class="content">
                <p class="transition hidden">There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
              </div>
              <div class="title">
                <i class="dropdown icon"></i>
                How do you acquire a dog?
              </div>
              <div class="content">
                <p class="transition hidden">Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
                <p class="transition hidden">A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
              </div>
            </div>

    <script>
            $('.ui.accordion').accordion();
    </script>    
    </body>
</html>

Upvotes: 0

Views: 387

Answers (1)

dev35000
dev35000

Reputation: 180

include 

<script src="https://code.jquery.com/jquery-2.2.0.js"></script>

before

 <script type="text/javascript" src="http://oss.maxcdn.com/semantic-ui/2.1.8/components/accordion.min.js"></script>

Upvotes: 2

Related Questions