Подскажите пожалкйста, как сделать так, чтобы при появлении блока из display none в display block, тот div который находится "сверху" (родитель) плавно менял высоту, я пробовал давать overflow hidden и transition 0.3s height, но не получалось... Спасибо!
<div class="profile-information box">
<div class="information" id="information">
<div class="statuse-block">
<p class="p-status">Статус:</p><input id="status" type="text" maxlength="140" placeholder="Изменить статус" value="Типо вот такой вот статус, ыы)">
</div>
<p>День рождения: 03.03.2003</p>
<p>Город: Санкт-Петербург</p>
</div>
<div class="big-information" id="big-information" style="display: none;">
<p>Родной город: Москва</p>
<p>Языки: Русский, Українська, English</p>
<p>Семейное положение: Все сложно</p>
<p>Пол: Мужской</p>
<p>Телефон: +00000000000</p>
</div>
<button id="open-information" onclick="(document.getElementById('big-information').style.display='block'), (document.getElementById('close-information').style.display='block'), (document.getElementById('open-information').style.display='none')">Показать информацию полностью</button>
<button id="close-information" style="display: none;" onclick="(document.getElementById('big-information').style.display='none'), (document.getElementById('close-information').style.display='none'), (document.getElementById('open-information').style.display='block')">Скрыть дополнительную информацию</button>
</div>
.box {
position: relative;
padding: 15px;
border-radius: 40px;
background: rgba(0, 0, 0, 0.3);
margin: 0 0 10px 0;
transition: background 0.1s;
}
.profile-information {
padding: 20px;
}
.information {
margin: 0 0 10px 0;
}
.statuse-block {
display: flex;
justify-content: space-between;
}
.p-status {
display: inline-block;
float: left;
}
#status {
width: 100%;
padding: 0 5px;
color: #FFF;
background: rgba(0, 0, 0, 0);
border: 0;
outline: 0;
cursor: pointer;
}
#status:focus {
border-bottom: 1px solid #FFF;
}
.big-information {
margin: 0 0 10px 0;
}
#open-information {
width: 100%;
color: skyblue;
background: rgba(0, 0, 0, 0);
border: 0;
outline: 0;
cursor: pointer;
transition: 0.3s color;
}
#close-information {
width: 100%;
color: skyblue;
background: rgba(0, 0, 0, 0);
border: 0;
outline: 0;
cursor: pointer;
transition: 0.3s color;
}
#open-information:hover {
color: #FFF;
}
#close-information:hover {
color: #FFF;
}
Пример:
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
У блоки с ИД "c" стиль Display none, можно ли сделать для блока с ИД "a" плавную height при раскрытии блока с ИД "c" из display none в block ?