Problem with toggle button and absolute position content

i have some content then slide toggle button then some content. Toggle button use slideToggle开发者_JAVA百科 jquery button. All elements have absolute position.

[Content1]

toggleButton

[invisible content]

[Content2]

When i clicked on toggleButton invisible content overlap content2. But i donnt want that behavior. I want move down Content2 and free space for my invisible content. How can i do this.

By setting all of these items to an absolute position, you're effectively telling the browser you don't want anything to push them around. However, you want the invisible_content area to modify the locality of Content2 from the looks of it.

If all of these items are always going to have the same arrangement, perhaps you shouldn't position all of them absolutely, but rather place them within an absolutely positioned element and move them as a whole. This would restore the behavior you're seeking between invisible_content and Content2. This would be the ideal solution.

If you cannot go that route, a more hack-ish method would be to provide some logic via a callback on the method that opens the invisible content. Within this callback, increase the top: value of the Content2 area to be +=$("#invisible_content").outerHeight(). Again though, this is a really bad solution and should only be considered if no other options is available to you.