Question

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</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

Answer 1

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