I’m trying to create a drop down menu that exposes the content when it’s hovered over. I didn’t know how to do it myself so I referenced W3school’s collapsible tutorial’s code.
In the tutorial the collapsible opens when clicked on, and I was able to make it open when hovered over, but it’s automatically closes when I try and hover over the content within. I need it to stay open when I hover over the internal content. I don’t really know any js though so could someone help me?
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("mouseover", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
Advertisement
Answer
You need to handle the mouseenter and mouseleave event, but please do a container for both of the elements so that you can refer those events to it (as it includes both elements)
var coll = document.getElementsByClassName("both");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("mouseenter", function() {
var collapser = this.querySelector(".collapsible");
collapser.classList.add("active")
var content = collapser.nextElementSibling;
content.style.maxHeight = content.scrollHeight + "px";
});
coll[i].addEventListener("mouseleave", function() {
var collapser = this.querySelector(".collapsible");
collapser.classList.remove("active")
var content = collapser.nextElementSibling;
content.style.maxHeight = null;
});
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '02B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "2212";
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Animated Collapsibles</h2>
<p>A Collapsible:</p>
<div class="both">
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="both">
<button class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>