After several attempts to add a simple in / out animation with opacity, I got the result I wanted. However, the animation is causing unwanted flashes.
If you switch from one item to another you will notice that the content will flash for a moment. What am I doing wrong ?
Also, is there a "cleaner" and shorter way to achieve the same effect?
var dropdownBtn = document.querySelectorAll('.menu-btn');
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var menuContent = this.nextElementSibling;
closeMenusExcept(menuContent);
if (!menuContent.classList.contains("show")) {
menuContent.classList.add("show");
} else {
menuContent.classList.add("hide");
setTimeout(function(){
menuContent.classList.remove("show");
menuContent.classList.remove("hide");
},100)
}
}));
function closeMenusExcept(menuContent) {
dropdownBtn.forEach((element) => {
if (menuContent !== element.nextElementSibling) {
element.nextElementSibling.classList.remove("show");
element.nextElementSibling.classList.add("hide");
}
})
}.menu-btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.menu-btn:hover {
background: #000;
color: #fff;
}
.drop_container {
display: none;
background-color: #fff;
animation:animateFromBottom 0.3s
}
.drop_container.show {
display: block;
}
.drop_container.hide {
animation:animateToBottom 0.3s;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
@keyframes animateFromBottom {
from{opacity:0}
to{opacity:1}
}
@keyframes animateToBottom {
from{opacity:1}
to{opacity:0}
}<div class="dropdown-menu">
<div class="menu-btn">One</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="menu-btn">Two</div>
<div class="drop_container">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>You need to swap opacity for max-height, here is your solution: https://codepen.io/nitinsuri/pen/bGLrLQB
var dropdownBtn = document.querySelectorAll('.menu-btn');
dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
var menuContent = this.nextElementSibling;
closeMenusExcept(menuContent);
if (!menuContent.classList.contains("show")) {
menuContent.classList.add("show");
} else {
menuContent.classList.add("hide");
setTimeout(function(){
menuContent.classList.remove("show");
menuContent.classList.remove("hide");
},100)
}
}));
function closeMenusExcept(menuContent) {
dropdownBtn.forEach((element) => {
if (menuContent !== element.nextElementSibling) {
element.nextElementSibling.classList.remove("show");
element.nextElementSibling.classList.add("hide");
}
})
}.menu-btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.menu-btn:hover {
background: #000;
color: #fff;
}
.drop_container {
background-color: #fff;
max-height: 0;
overflow: hidden;
}
.drop_container.show {
max-height: 100vh;
animation:animateFromBottom 1s;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}
@keyframes animateFromBottom {
from{
max-height: 0;
overflow: hidden;}
to{max-height: 100vh;}
}
@keyframes animateToBottom {
from{max-height: 100vh;}
to{
max-height: 0;
overflow: hidden;}
}<div class="dropdown-menu">
<div class="menu-btn">One</div>
<div class="drop_container">
<a class="item" href="#">fist link of One</a>
<a class="item" href="#">second link of One</a>
</div>
<div class="menu-btn">Two</div>
<div class="drop_container">
<a class="item" href="#">fist link of Two</a>
<a class="item" href="#">second link of Two</a>
</div>
</div>In Jquery you can approach it this way. you can either use toggle or slide toggle put slow or fast however you want it. I just added some new class so your css wont get affected. Let me know If this is what you are looking at.
$(document).ready(function(){
$(".btn1").click(function(){
$(".container1").slideToggle();
$(".container2").hide("slow");
});
$(".btn2").click(function(){
$(".container2").slideToggle();
$(".container1").hide("slow");
});
});.menu-btn {
background: #e0e0e0;
padding: 10px;
margin: 5px 0px 0px 0px;
}
.menu-btn:hover {
background: #000;
color: #fff;
}
.drop_container {
display: none;
background-color: #fff;
animation:animateFromBottom 0.3s
}
.drop_container.show {
display: block;
}
.drop_container.hide {
animation:animateToBottom 0.3s;
}
.drop_container > .item {
display: flex;
flex-direction: column;
margin-left: 10px;
padding: 10px 0px 0px 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="dropdown-menu">
<div class="menu-btn btn1">One</div>
<div class="drop_container container1">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
<div class="menu-btn btn2">Two</div>
<div class="drop_container container2">
<a class="item" href="#">Contact Us</a>
<a class="item" href="#">Visit Us</a>
</div>
</div>