Hello! I'm facing an issue with toggling between two sets of content on my page. Initially, the correct content shows up, but when I switch tabs, the new content doesn't appear. Furthermore, if I click back to the first tab, that content disappears as well.
How can I ensure a smooth toggle between the different content sections without any disappearing act?
const dropdown = document.querySelector('.dropdown-select');
const dropdownItem = document.querySelectorAll('.dropdown-select .menu li');
dropdown.addEventListener('click', (e) => {
if (dropdown.classList.contains('closed')) {
dropdown.classList.remove('closed');
dropdown.classList.add('open');
} else {
dropdown.classList.add('closed');
dropdown.classList.remove('open');
}
});
for (let i = 0; i < dropdownItem.length; i++) {
dropdownItem[i].addEventListener('click', function () {
const dropdownItemClicked = document.querySelector('.menu li.active');
if (dropdownItemClicked) dropdownItemClicked.classList.remove('active');
dropdownItem[i].classList.add('active');
})
}
const options = document.querySelectorAll('.menu li')
const results = document.querySelectorAll('.tabbed-content div')
options.forEach(e => e.addEventListener('click', function () {
results.forEach(f => f.style.display = f.id == e.dataset.target ? "block" : "none")
}));.dropdown-select {
transition: all 0.2s ease;
overflow: hidden;
cursor: pointer;
border-top: 1px solid #E0E5EC;
width: 100%;
}
@media (min-width: 768px) {
.dropdown-select {
display: flex;
align-items: center;
cursor: default;
border-bottom: 1px solid #E0E5EC;
height: 3.75rem;
}
}
.dropdown-select.open {
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
.dropdown-select.open {
box-shadow: unset;
}
}
.dropdown-select__title {
display: flex;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E0E5EC;
}
@media (min-width: 768px) {
.dropdown-select__title {
border-bottom: unset;
}
}
.dropdown-select__title h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
pointer-events: none;
}
.dropdown-select__title img {
width: 1.312rem;
height: 0.656rem;
margin-left: auto;
transition: all 0.2s ease;
}
.dropdown-select ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-select .menu li {
font-size: 1rem;
line-height: 1.5rem;
padding: 1rem 0;
font-weight: 800;
color: #6D7582;
}
@media (min-width: 768px) {
.dropdown-select .menu li {
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
}
.dropdown-select .menu li:first-child {
margin-right: 2rem;
}
}
.tabbed-content {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.tabbed-content .release {
display: none;
} <main>
<div class="dropdown-select closed">
<div class="dropdown-select__title">
<h6>Other Releases</h6>
<img src="https://cdn-icons-png.flaticon.com/24/25/25243.png" alt="down caret ">
</div>
<ul class="menu">
<li data-target="fall21" class="active">Fall 2021</li>
<li data-target="summer21">Summer 2021</li>
</ul>
</div>
<h6 class="intro kicker kicker--bold">Product Releases</h6>
<div class="tabbed-content">
<div id="fall21" class="release" style="display: block;">
<div class="page-hero">
<h2>Fall 2021</h2>
</div>
</div>
<div id="summer21" class="release">
<div class="page-hero">
<h2>Summer 2021</h2>
</div>
</div>
</div>
</main>