Добрый день создал тестовый аккордеон хотел добавить плавности открытия и закрытия блоков но столкнулся с проблемой не могу увеличить высоту обьекта при выполнении ивента только при наведении. Вот собственно код подскажите как сделать плавное увеличение при срабатывании 'click' P.S Чтобы было понятно что мне нужно надо навести на блок с фразой "Вы нашли скрытый текст"
(function () {
var elems = document.querySelectorAll('.block'),
text = document.querySelectorAll('.text-block');
//console.log(elems);
Array.from(text).forEach(function (item, i, text) {
// console.log(item.parentNode);
// console.log(i);
item.parentNode.addEventListener('click', function (e) {
var active = document.querySelectorAll('.active'),
activeText = this.children[1];
// console.log(active.length);
if(active.length > 0) {
activeText.classList.add('active');
active[0].classList.remove('active');
} else {
activeText.classList.toggle('active');
//activeText.style.height = 100 + 'px';
}
// animation1(activeText);
});
});
})();
html body {
width:100%;
height:100%;
}
body div span h2{
display: block;
font-family: "Ubuntu", Arial, Verdana, sans-serif;
text-align: center;
-o-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
h2 {
display: block;
text-align: center;
vertical-align: middle;
margin-top: 0px;
}
.block-all {
width: 500px;
height: auto;
margin: 0 auto;
}
.block {
display: inline-block;
width: 100%;
height: auto;
padding: 1px;
background-color: #676664;
margin: 5px;
cursor: pointer;
}
.block div {
display: none;
}
.block .active {
display: block;
width: 100%;
position: relative;
height: 20px;
background-color: #E6E6E6;
text-align: center;
vertical-align: middle;
margin-top: 0px;
-webkit-transition: height 0.8s;
-moz-transition: height 0.8s;
-o-transition: height 0.8s;
transition: height 0.8s;
}
.block .active:hover {
height:100px;
}
<body>
<div class="block-all">
<div class="block">
<h2>Нажми на меня!</h2>
<div class="text-block"><h3>Вы нашли скрытый текст!</h3></div>
</div>
<div class="block">
<h2>Нажми на меня!</h2>
<div class="text-block"><h3>Вы нашли скрытый текст!</h3></div>
</div>
<div class="block">
<h2>Нажми на меня!</h2>
<div class="text-block"><h3>Вы нашли скрытый текст!</h3></div>
</div>
<div class="block">
<h2>Нажми на меня!</h2>
<div class="text-block"><h3>Вы нашли скрытый текст!</h3></div>
</div>
<div class="block">
<h2>Нажми на меня!</h2>
<div class="text-block"><h3>Вы нашли скрытый текст!</h3></div>
</div>
<div class="block">
<h2>Нажми на меня!</h2>
<div class="text-block"><h3>Вы нашли скрытый текст!</h3></div>
</div>
</div>