Jquery $(“#accordion”).accordion is not working

Question

I am using jQuery accordion. In my jsp I have following structure:

<div id="accordion">

    <c:if...>
        <h3>Heading 1</h3>
        <div>
            <table>
                Content 1
            </table>
        </div>
    </c:if...>

    <c:if>
        <h3>Heading 2</h3>
        <div>
            <table>Content 2
            </table>
        </div>
    </c:if>

</div>

Following are the jquery i have included in the same order as given.

<script type="text/javascript" src="http://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>

I am trying to have the first element open (ie "Heading 1" and "Content 1") on page load. When user clicks on second "Heading 2", the first heading should close automatically.

I tried using the following code to load the accordion on document.ready :

$(document).ready(function() { 
    $( "#accordion" ).accordion({ active: 0 });
});

But I am still getting the error:

Object does not support the property or method.

Answer 1

Your code looks fine to me. I have set up a fiddle with it which works.

The line I would look at is

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

In my fiddle I'm including jQuery UI 1.9.2 (try using that version of jQuery UI or try a newer version of both jQuery and jQuery UI, I notice that jsfiddle doesn't support jQuery UI on jQuery 1.10.1 but it does support UI 1.10.3 on 2.0.2)