CODEWITHSUNDEEP
jqueryuser-interfaceaccordion
Brooke B
Brooke B

Reputation: 31

jQuery UI Accordion "jumps" on load

I just finished a portfolio website for a college web design/graphic design course, and I am using the jQuery UI accordion for my part of my navigation. My website is live, you can click here to see it.

If you click on "work," the accordion folds out, but you'll notice it does a little "jump" into place. I can't seem to figure out what's wrong. I've tried changing the autoHeight to false in the java script, which does nothing.

Here's a fiddle with my HTML and CSS, but I noticed it renders a jump in a different way than my live site.. http://jsfiddle.net/jNYAc/

The jQuery code I currently have is very simple:

$(function () {
    $(".accordion").accordion({
        active: false,
        collapsible: true
    });
});

If anyone has any suggestions, I would really appreciate it!!

Upvotes: 2

Views: 1374

Answers (1)

swatkins
swatkins

Reputation: 13630

I'm not sure why this works, but if I add overflow: hidden to the container div (<div class="nav">), then the jump is gone. I also removed the height declaration.

My guess is that the div changes width when the accordion is open, and that forces the "jump" - and by adding overflow:hidden, the width doesn't matter as the UI just ignores the width of the <ul> inside it.

Note: I did this directly on your page in devtools, not the jsfiddle.

Upvotes: 3

Related Questions