i'm with a problem with the content of my modal. The code is supposed to work like this: When the modal is not-collapsed it has a class of 'is-not-collapsed', which has height: 0. But when the user clicks a button, it receives the class 'is-collapsed' which has the height set, when it collapses its content is supposed to collapse as well (It's the same mechanic activated by the same button - a class with height:0, when the modal is toggled it receives a class with a defined height). But for some reason the modal content is acting weird when the modal is collapsed, it either doesn't toggles off when the modal does, or it doesn't even toggles the modal at all. Here's my code, html first:
function showMenuContent(toggler, menu) {
toggler.addEventListener('click', () => {
setTimeout(() => {
menu.classList.remove('opacity-0');
menu.classList.add('opacity-1');
}, 300);
});
}
function hideMenuContent(toggler, menu) {
toggler.addEventListener('click', () => {
setTimeout(() => {
menu.classList.remove('opacity-1');
menu.classList.add('opacity-0');
}, 200);
})
}
function toggleDropdownMenu() {
const DOMBody = document.querySelector('body');
const dropdownToggler = document.querySelectorAll('.dropdown-toggler');
const accountToggler = document.querySelector('#account');
const helpToggler = document.querySelector('#help');
const accountContainer = document.querySelector('.account-container');
const helpContainer = document.querySelector('.help-container');
const dropdownMenu = document.querySelector('#dropdown-menu');
const closeDropdown = document.querySelector('#close-dropdown');
dropdownToggler.forEach(item => {
item.addEventListener('click', function() {
this.classList.toggle('active');
dropdownMenu.classList.toggle('is-collapsed');
dropdownMenu.classList.toggle('is-not-collapsed');
if (dropdownMenu.classList.contains('is-collapsed')) {
if (this.classList.contains('account')) showMenuContent(accountToggler, accountContainer);
else showMenuContent(helpToggler, helpContainer);
DOMBody.style.overflowY = 'hidden';
setTimeout(() => {
closeDropdown.style.display = 'block';
}, 300);
} else {
if (this.classList.contains('account')) hideMenuContent(accountToggler, accountContainer);
else hideMenuContent(helpToggler, helpContainer);
DOMBody.style.overflowY = 'visible';
closeDropdown.style.display = 'none';
}
});
});
}
toggleDropdownMenu();.is-hidden {
height: 0;
}
.is-visible {
height: 40px;
}
.is-not-collapsed {
height: 0;
}
.is-collapsed {
height: 400px;
}
.opacity-0 {
opacity: 0;
height: 0;
}
.opacity-1 {
opacity: 1;
height: 400px;
}
.active {
color: white !important;
}
.dropdown-menu {
width: 100%;
background-color: #161616;
position: relative;
transition: height 0.5s cubic-bezier(0.5, 0.25, 0.015, 1) 200ms;
z-index: 2;
}
.menu-container {
background-color: transparent;
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
justify-content: space-around;
transition: all 0.5s cubic-bezier(0.5, 0.25, 0.015, 1);
}
.menu-content {
position: relative;
top: 40%;
transition: all 0.2s cubic-bezier(.5, .25, .015, 1);
}<nav class="menu-togglers is-visible">
<ul>
<li class="dropdown- account" id="account"><i class="far fa-user"></i></li>
<li class="dropdown-toggler account" id="help"><i class="fas fa-question"></i></li>
<li><i class="fas fa-gamepad"></i></li>
</ul>
</nav>
<!--menu-togglers-->
<nav class="sub-menu">
<ul>
<li><img src="assets/legacy-nfs-abbreviated-logo-1.svg" alt="nfs-red-logo"></li>
</ul>
</nav>
<!--sub-menu-->
<div class="dropdown-menu is-not-collapsed" id="dropdown-menu">
<img id="close-dropdown" class="dropdown-toggler" src="assets/x-lg.svg">
<div class="account-container menu-container opacity-0">
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/connectEA.svg" alt="">
<p>Sign In</p>
</a>
</div>
<!--account-item-->
<div id="account-item" class="menu-content">
<a href="">
<img src="assets/createAccountEA.svg" alt="">
<p>Create Account</p>
</a>
</div>
<!--account-item-->
</div>
<!--account-container-->
<div class="help-container menu-container opacity-0">
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/originIcon.svg" alt="">
<p>Verify my Origin Login</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/linkAccount.svg" alt="">
<p>Link my Origin to my PSN ID</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/rescueCode.svg" alt="">
<p>How do I redeem a Code?</p>
</a>
</div>
<!--help-item-->
<div id="help-item" class="menu-content">
<a href="">
<img src="assets/errorIcon.svg" alt="">
<p>I can't play online!</p>
</a>
</div>
<!--help-item-->
</div>
<!--account-container-->
</div>
<!--dropdown-menu-->Can anyone help me with this?
PS: I wrote all the info i thought necessary for understanding my question, if it's missing something, please, let me know