Здравствуйте. Есть такая "табличка" Ссылка на JSFIddle для удобства
При наведении на каждый столбец, первый и последний li в этом столбце увеличивают свою высоту. Нужно сделать так, чтобы при увеличении этих li, контент, который расположен внизу не отодвигался вниз. Можно было бы решить проблему задав wrapper высоту немного больше чем высоты колонок, НО! Есть еще ссылка в первом столбце, при нажатии на которую появляются скрытые li, поэтому этот способ не сработает. Подскажите как сделать так, чтобы контент который снизу не сдвигался при наведении на столбцы когда таблица в свернутом и развернутом состоянии. Заранее спасибо.
$('.show-li').click(function () {
$('.hidden').slideToggle();
return false;
});
.hidden{
display:none;
}
.wrapper{
display:flex;
}
ul{
list-style:none;
padding:0;
}
ul li{
padding:5px;
height:20px;
border:1px solid grey;
}
.col:hover li:first-child{
margin-top:-10px;
height:30px;
}
.col:hover li:last-child{
height:30px;
margin-bottom 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="col">
<ul>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li><a href="#" class="show-li">show all li</a></li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li>some-text</li>
</ul>
</div>
<div class="col">
<ul>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li>some-text</li>
</ul>
</div>
<div class="col">
<ul>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li>some-text</li>
</ul>
</div>
<div class="col">
<ul>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li>some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li class="hidden">some-text</li>
<li>some-text</li>
</ul>
</div>
</div>
<div class="some-content">
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Le
</div>