Всем здравствуйте.
Есть ламерский вопрос - буду признателен если кто поможет.
Есть блок родитель с дочерним блоком к примеру
<style>
.parent{
position: relative;
border: 1px solid #000;
width: 500px;
}
.child{
display: none;
position: absolute;
}
.button{
cursor: pointer;
padding: 10px 0;
width: 150px;
text-align: center;
border: 1px solid #000;
}
</style>
<div class="button">
ВКЛ. ВЫКЛ :)
</div>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aperiam repellat sint rem assumenda perferendis minus repudiandae error modi recusandae, reprehenderit iste ipsam ullam quae autem totam minima obcaecati officiis!
</div>
</div>
Какой то текст
<script>
$(document).ready(function() {
$(".button").click(function() {
if ($('.child').is(':visible')) {
$('.child').slideUp();
} else {
$('.child').slideDown();
}
});
});
</script>
Дочерний блок как видно по стилям абсолют и невидимый, но он появляется и исчезает при нажатии некой кнопки с помощью slideUp slideDown (да не с помощью slideToggle) но он не влияет на высоту родительского блока так как имеет абсолютное позиционирование.
Можно ли сделать так что бы родительский блок вел себя так вроде как абсолютного позиционирование не было бы? А именно что бы родитель принимал высоту своего контента, только не по окончании анимации а во время ее действия.
Только еще надо учесть что блоков таких как дочерний может быть несколько