On my website, I have a menu of logos that are clickable. These logos always display except on smaller screens, where they need to be toggled to show using a hamburger menu. The menu toggles fine when it is on a smaller screen, but there is an issue when you resize the window (if the menu is closed). At times, all of the logos display as "none" and won't toggle back. I'm unsure if I should adjust my CSS or if there is something wrong with my JavaScript code.
document.getElementById('menu').addEventListener('click', toggleLogos);
function toggleLogos() {
let logos = document.getElementsByClassName("team");
for (i = 0; i < logos.length; i++) {
if (logos[i].style.display === 'none') {
logos[i].style.display = 'inline';
} else {
logos[i].style.display = 'none';
}
}
}.team {
width: 55px;
display: flex;
}
.menu-icon {
display: none;
}
@media screen and (max-width: 600px) {
.mobile-container {
margin: auto;
height: fit-content;
}
.menu-icon {
display: inline;
width: 100%;
background-color: red;
}
.team {
display: none;
}
}<div class="wrapper">
<div class="container mobile-wrapper">
<a href="#" class="menu-icon" id="menu">
<img src="https://example.com/placeholder.jpg">
</a>
<div class="sidebar">
<div class="column logos">
<a href=""><img src="https://example.com/placeholder.jpg" alt="" class="team"></a>
<a href=""><img src="https://example.com/placeholder.jpg" alt="" class="team"></a>
<a href=""><img src="https://example.com/placeholder.jpg" alt="" class="team"></a>
<a href=""><img src="https://example.com/placeholder.jpg" alt="" class="team"></a>
</div>
</div>
</div>
</div>