CODEWITHSUNDEEP
javascriptjqueryjquery-animatehtml-lists
Ty Bailey
Ty Bailey

Reputation: 2432

Slide a list element with jQuery without effecting other list elements

I am trying to slide up a list element and reveal more content which appears to be hidden "under" the list element, but when the animation occurs all other list elements jump down slightly. When I remove the content under the list element but leave the animation everything works fine.

How can I make this work without effecting the other elements in the list?

It is difficult for me to explain this, so here is a fiddle of what I am talking about: http://jsfiddle.net/YNBxz/1377/

click on any one of the blocks in the view section to see the animation.

If you comment out the jQuery(this).children('.block-content').slideToggle(500); you can see what it SHOULD look like during the animation.

Upvotes: 0

Views: 166

Answers (1)

Michael Peterson
Michael Peterson

Reputation: 1123

You need to change the positioning of .block-content to position: absolute. That will fix the sliding of the other li elements. Then, to fix the positioning of the .block-content, remove width: 100%, change the right positioning to right: 0, and add top: 45px. The css for .block-content is then:

.block-content {
    font-size: 12px;
    font-family: Helvetica, sans-serif;
    display: block;
    background: #333;
    padding: 10px;
    position: absolute;
    top: 45px;
    right: 0px;
    height: 120px;
}

Also, if you want the bottom of .block-content to line-up with the bottom of the li's, change the jquery to animate to 140px, not 115px.

You can see the results: http://jsfiddle.net/YNBxz/1379/

Upvotes: 1

Related Questions