I have multiple lists and each list has its own dropdown feature. I want to make sure that only one dropdown is open at a time. When I click to open one, the currently opened dropdown should close automatically.
function toggleClass(element, className) {
if (!element || !className) {
return;
}
var classString = element.className,
nameIndex = classString.indexOf(className);
if (nameIndex == -1) {
classString += ' ' + className;
} else {
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
}
element.className = classString;
}
function dropDown(el) {
toggleClass(el.nextElementSibling, 'overlayOpen');
}ul {
width: 200px;
}
li {
margin: 0;
font-size: 20px;
line-height: 50px;
width: 100%;
cursor: pointer;
background-color: red;
overflow: hidden;
}
.overlayOpen {
opacity: 1 !important;
height: 50px !important;
width: 100% !important;
}
.overlay {
width: 100%;
z-index: 1000;
background-color: green;
overflow: hidden;
max-width: 800px;
opacity: 0;
height: 0;
width: 0;
-webkit-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
-moz-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
-o-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
-ms-transition: width 0.2s, height 0.2s, opacity 0.2s ease;
transition: width 0.2s, height 0.2s, opacity 0.2s ease;
}<ul>
<li id="1" onclick='dropDown(this)'>example</li>
<li id="overlay_1" class='overlay'>Hidden stuff</li>
</ul>
<ul>
<li id="2" onclick='dropDown(this)'>example</li>
<li id="overlay_2" class='overlay'>Hidden stuff</li>
</ul>