jquery-ui accordion issue: animation freezes + content not showing when clicking

I was trying jQueryUI accordion. I created a test site, copied the code and put things in place. It works fine.

Then I tried to put it in my website. In my website, I have two menu. One is horizontal, on the top. The other is vertical, to the left. I intend to apply accordion to the vertical menu. The vertical menu will also change when different item in the top horizontal menu is clicked.

First thing I did was testing it on my homepage, just to see if there is any conflicts with my current design. The code for the vertical menu is like this:

<!-- leftFrame begin -->
<div id="leftFrame">
    <div id="accordion">
        <h3><a href="#section1">Section 1</a></h3>
        <div>
            <p>homepage11111111</p>
        </div>

        <h3><a href="#section2">Section 2</a></h3>
        <div>
            <p>homepage22222222</p>
        </div>

        <h3><a href="#section3">Section 3</a></h3>
        <div>
            <p>homepage33333333</p>
            <ul>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
                <li>List item</li>
            </ul>
            <a href="#othercontent">Link to other content&l开发者_开发知识库t;/a>
        </div>
    </div>
</div>  <!-- leftFrame end -->

<script type="text/javascript">
    $(document).ready(function(){
        $( "#accordion" ).accordion({
            autoHeight: false,
            navigation: true
        });
    });
</script>

Here came the problem. The first penal was expanded as default. When I clicked on a different panel, the content under that panel was not shown. It just expanded a little bit and froze there. The first panel did not collapse either. All panels became not click-able. Like the screenshot below:

Interesting thing was, if I put the accordion part in a seperate leftmenu.html file and use "$('#leftFrame').load(leftmenu.html)" to load it into the "leftFrame" div. Everything works again.

My first thought was some other javascript or css in the homepage might affect this. I tried to comment out part then all of other javascript or css. It was still not working on the homepage while working fine with the .load function.

Any idea why?

Thanks in advance Milo

I turned out to be an easing conflict between different js files. Just make sure to use only one version of easing function.

I know you have your answer, but for others, I had a similar issue with the same weird behavior when I was adding new sections via a clone.

I cloned the first (only) section of the accordion, appended it to the end, then changed the title and contents to suit my need. After that, I destroyed and re-added the accordion to ensure it worked with the new contents. After that, multiple (all new) sections showed as the active one (due to the clone) and when I clicked them, they would initially work but suddenly stop working at some point.

To resolve this issue, I did the following:

1. Moved the destroy prior to the clone/append
2. cloned/appended my new sections
3. modified my section content as needed
4. Added back the accordion functionality.

Hope this helps someone along the line.