Question

I am trying to implement a js accordion I found and I’m having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It’s not smooth at all. I don’t know much about js so please explain your answers carefully. Thanks so much!

http://imip.rvadv.com/accordion.html

EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it

http://jsfiddle.net/imakeitpretty/ruwjn/

Answer 1

Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/

The problem wasn’t the .js, and you don’t have to write it all on jsfiddle, since it’s JQuery UI, you can simple check it to include it, if it’s another external .js, use it as a resource, check fiddle’s documentation for that.

Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.

The main problem with the jumping was the:

.st-accordion ul li.st-open > a{
    margin-top: 70px;
}

I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.

Hope it helps you!

---

UPDATE

Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:

body {
    height: 2000px; 
}