jQuery accordion its not working

Question

I'm trying to use the jquery ui accordion plugin and I don't know why its not working.

I came to http://jqueryui.com/ and read the documentation, I choose a theme and then I selected "UI Core toggle all", and then in widgets I selected only "Accordion".

I save the files in my "acc" folder and then I import the files like this:

<link rel="stylesheet" type="text/css" href="../acc/css/jquery-ui-style.css" />
<title>Projet</title>
<script type="text/javascript" src="../acc/js/jquery.js"></script>
<script type="text/javascript" src="../acc/js/jquery-ui.js"></script>
<script type="text/javascript" src="../acc/js/acc.js"></script>

And then in my acc.js file Im starting accordion:

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

But its not working, I'm having only my normal html without the accordion.

My html is this:

 <div class="accordion">

        <h3>Title 1</h3>    
        <div>
            <p>My first post.</p>
        </div>        

        <h3>Title 2</h3>
        <div>
            <p>My second post.</p>  
        </div>        

        <h3>Title 3</h3>
        <div>
            <p>My third post</p>    
        </div>

    </div><!-- /accordion -->   

Answer 1

From the code you have posted it should work so I can only assume it isn't including your scripts properly

If the acc folder is in the root folder of your website you should consider changing your scripts and css to:

<link rel="stylesheet" type="text/css" href="/acc/css/jquery-ui-style.css" />
<script type="text/javascript" src="/acc/js/jquery.js"></script>
<script type="text/javascript" src="/acc/js/jquery-ui.js"></script>
<script type="text/javascript" src="/acc/js/acc.js"></script>

Remove the dots - as that means you are trying to get to a folder one up from where you are (in the url, not the file with the html).

If this doesn't work then press f12 and check your console, you may have other js errors stopping the the accordion working

Answer 2

Im not entirely familiar with jQuery UI accordions, but have you tried placing your $('.accordion').accordion(); inside jQuery document.ready ?

See the code below, most likely your accordion is being initialized before the actual html on the page exists. That's assuming you setup your html correctly,and you are including the proper jQuery JavaScript files etc.

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

Hopefully that helps.

Answer 3

Sounds like you unchecked the JqueryUI Core, download the standard version of JqueryUI and overwrite the version created.

A fiddle shows that the code is correct. If you are missing the core then no widgets will work

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