CODEWITHSUNDEEP
javascriptjqueryhtml
thetipsyhacker
thetipsyhacker

Reputation: 1422

jQuery .accordion() Doesn't Work because jQuery Not Loading into HTML

I've read everything on the web as well as everything on Stack Overflow. I've modified my code many times and my code STILL doesn't work! I'm going crazy because jQuery shouldn't be this difficult!

Just to clarify, the accordion function does not even show up on the page. All my HTML and CSS work perfectly. All I see on the page is headings and paragraphs. The paragraphs are supposed to act as an accordion when the headings are clicked.

Here is my HTML:

<!DOCTYPE HTML>
<html>
  <head>
        <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="SHORTCUT ICON" HREF="/favicon.png">
    <title>Services</title>
    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <script>
             $(document).ready(function(){
                $('#accordion').accordion();
             })
    </script>
  </head>

    <body>
        <div id="accordion">
            <h2 style="font-size:40px">Web Development</h2>
            <div>
                <p style="font-size:30px">Text text text Text text text Text text text Text text text Text text text</p>
            </div>

            <h2 style="font-size:40px">Mobile Development</h2>
            <div>
                <p style="font-size:30px">Text text text Text text text Text text text Text text text Text text text</p>
            </div>

            <h2 style="font-size:40px">SEO</h2>
            <div>
                <p style="font-size:30px">Text text text Text text text Text text text Text text text Text text text</p>
            </div>
        </div>
    </body>
</html>

UPDATE

It appears that for some reason, jQuery is not loading into my HTML. How should I fix this?

Upvotes: 2

Views: 1393

Answers (5)

Sahar Ch.
Sahar Ch.

Reputation: 489

Replace the jquery and jquery-ui scripts definition in your code with these:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

It should work now.

Upvotes: 1

Mirko Cianfarani
Mirko Cianfarani

Reputation: 2103

Ok I think that you searching this

I add 

{ fillSpace: true, collapsible: true ,active: false}

Then the script is :

<script>
             $(document).ready(function(){
               $('#accordion').accordion({ fillSpace: true, collapsible: true ,active: false});
             });
    </script>

You can read the difference of collapsible and fillspace on accordion

Click on Collapse content and Fill Space in the right of the image for see the difference.

Upvotes: 0

user3383479
user3383479

Reputation:

try this as jQuery library:

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

instead of those one:

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

source:Accordion

Upvotes: 0

Kei9Ahfu
Kei9Ahfu

Reputation: 47

try this:

$(function () {
    $('#accordion').accordion();
});

Could you please run this code: My guess is, that one of those are not loaded:

if (window.jQuery) {  
   alert("Jquery loaded");
} else {
    alert("not loaded");// jQuery is not loaded
}

Upvotes: 0

Jamie Tabone
Jamie Tabone

Reputation: 581

The best thing is for the script to go underneath the html code. Another important thing is to use window.onload() instead of .ready(). This worked for me two days ago :)

This allows the code to run once the page has completely loaded:

http://www.w3schools.com/jsref/event_onload.asp

Hope it helps :)

Upvotes: 0

Related Questions