CODEWITHSUNDEEP
javascriptjqueryhtml
GCien
GCien

Reputation: 2349

jQuery UI accordion not working within Safari from local directory

DISCLAIMER: This is a question from a "python coder" attempting to learn js and jQuery.

I have created an accordion as follows (filename: script.js locally):

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

I also have my index.html:

<!DOCTYPE html>
<html>
    <head>
    <title>astrobox.io | Welcome!</title>
    <link rel='stylesheet' type='text/css' href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div id="menu">
            <h3>Data Collection</h3>
            <div>
                <p></p>
            </div>
            <h3>Data Analysis</h3>
            <div>
                <p></p>
            </div>
            <h3>Data Visualisation</h3>
            <div>
                <p></p>
            </div>
        </div>
    </body>
</html>

I'm really not 100% sure what I have done wrong. Any hints at a solution would be warmly received. Do I need to change "menu" to a class and utilising $('.menu')?

These are the outside libraries I link to:

<title>astrobox.io | Welcome!</title>
<link rel='stylesheet' type='text/css' href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>

Many thanks

Upvotes: 0

Views: 526

Answers (1)

Anil kumar
Anil kumar

Reputation: 136

<!DOCTYPE html>
<html>
    <head>
    <title>astrobox.io | Welcome!</title>
    <link rel='stylesheet' type='text/css' href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

    <script>
        $(document).ready(function() {
          $('#menu').accordion();
    });
    </script>
    </head>
    <body>
        <div id="menu">
            <h3>Data Collection</h3>
            <div>
                <p></p>
            </div>
            <h3>Data Analysis</h3>
            <div>
                <p></p>
            </div>
            <h3>Data Visualisation</h3>
            <div>
                <p></p>
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Related Questions