I do not understand how to achieve this effect.

When you hide a block, you need to lift it up, but the problem is with the content that is under the block, you need to lift it as you hide the block itself.

Here is an example link text .

As you can see, there is an empty space. It is clear that it is also possible to raise the block with content, and whether it is possible to do without raising the content, i.e. Is it possible to create the same effect with slideToggle() ?

2 answers 2

http://jsfiddle.net/L6mxrh8y/1/

HTML

 <ul class="block"> <li><button id="hide">скрыть блок</button></li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <div>этот текст должен следовать в ходе закрытия блока</div> <button class="reset">nоказать блок (для теста)</button>

Javascript

 $('#hide').on('click', function(){ $('.block').slideUp(); }); $('.reset').on('click', function(){ var x = $('.block').slideDown(); });

CSS

 .block { background: #eee; position: relative; }

    "display: none" will help. (there will be no smoothness) or the height of the block changes to 0. then the upper block will be tightened.