Из подсмотреного смастерил но неработает как надо. Начинает работать только после второго наведения курсора на элемент!! ????????????
Помгите разобратся.
<html lang="en">
<body>
<style>
.elem{
width:12%;
height:50px;
background-color: red;
display: inline-block;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.open{
height: 0px;
background-color: aqua;
text-align: center;
line-height: 150px;
overflow: hidden;
transition: all 1s;
}
.height{
height:150px;
border: 1px solid red;
text-align: center;
line-height: 150px;
}
</style>
<div class="elem" id="elemMenu1">1</div>
<div class="elem" id="elemMenu2">2</div>
<div class="elem" id="elemMenu3">3</div>
<div class="elem" id="elemMenu4">4</div>
<div class="elem" id="elemMenu5">5</div>
<div class="elem" id="elemMenu6">6</div>
<div class="elem" id="elemMenu7">7</div>
<div class="elem" id="elemMenu8">8</div>
<div class="open" id="opener1">1</div>
<div class="open" id="opener2">2</div>
<div class="open" id="opener3">3</div>
<div class="open" id="opener4">4</div>
<div class="open" id="opener5">5</div>
<div class="open" id="opener6">6</div>
<div class="open" id="opener7">7</div>
<div class="open" id="opener8">8</div>
<script>
(function () {
var divs2 = document.querySelectorAll("div.open");
var divs = document.querySelectorAll("div.elem");
var handler = function() {
var index = Array.prototype.indexOf.call(divs, this);
divs[index].onmouseover = function(){
divs2[index].classList.add("height");
};
divs[index].onmouseout = function(){
divs2[index].classList.remove("height");
};
divs2[index].onmouseover = function(){
divs2[index].classList.add("height");
};
divs2[index].onmouseout = function(){
divs2[index].classList.remove("height");
};
}
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = handler;
}
}());
</script>
</body>
</html>