As I work on creating a menu using HTML and JavaScript, I've designed it to be a grid layout with 3 rows and 2 columns. The menu contents are also structured in a grid format. When the screen width is reduced, the layout changes to a single row and column. The concept is to have the menu contents hidden when the screen size decreases, with users needing to click on the heading to reveal the contents. To achieve this functionality, I've written a JavaScript code snippet. However, I encountered an issue where, upon expanding and collapsing the contents, they remain invisible when the screen width is increased again. Below is a portion of the code, and I'm seeking assistance on solving this problem.
const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(toggle => {
const content = toggle.nextElementSibling;
toggle.addEventListener('click', () => {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});#assist {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 17px;
white-space: nowrap;
max-width: 1300px;
}
.toggle {
font-size: 1.2rem;
}
.content {
display: block;
margin-top: 4px;
}
.content a {
display: grid;
}
#assist .content {
line-height: 35px;
margin-bottom: 50px;
}
@media screen and (max-width: 1270px) {
#assist {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
#assist .content {
display: none;
}
}<div id="assist">
<div>
<span class="toggle">Retun Policy</span>
<div class="content">
<a href="">What is the retun policy</a>
<a href="">Test2 </a>
<a href="">Test 3</a>
</div>
</div>
<div>
<span class="toggle">Corporate</span>
<div class="content">
<a href="">Where can I learn more about company</a>
<a href="">Test2</a>
<a href="">Test3</a>
</div>
</div>