In the snippet below, I'm using a simple dropdown custom dropdown menu (not a select menu) and I'm trying to display dynamic content based on which menu item is chosen. I'm unsure where to turn from this point.
How do I display different content based on the dropdown selection?
let dropdown = document.querySelector('.dropdown-select');
dropdown.addEventListener('click', (e) => {
if (dropdown.classList.contains('closed')) {
dropdown.classList.remove('closed');
} else {
dropdown.classList.add('closed');
}
});.active {
color: purple;
}
.dropdown-select {
transition: all 0.2s ease;
overflow: hidden;
cursor: pointer;
border-top: 1px solid #E0E5EC;
}
.dropdown-select__title {
display: flex;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E0E5EC;
}
.dropdown-select__title h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.dropdown-select__title img {
width: 1.5rem;
height: 1.5rem;
margin-left: auto;
transition: all 0.2s ease;
}
.dropdown-select ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-select .menu {
transition: all 0.2s ease;
}
.dropdown-select .menu li {
font-size: 1rem;
line-height: 1.5rem;
padding: 1rem 0;
font-weight: 800;
color: #005fec;
}
.dropdown-select__title, .dropdown-select .menu {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.dropdown-select.closed .menu {
height: 0;
}
.dropdown-select.closed img {
transform: rotate(180deg);
}
.tabbed-content {
padding: 0 1.5rem;
margin-top: 2rem;
}<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>Fall 2021</li>
<li>Summer 2021</li>
</ul>
</div>
<div class="tabbed-content">
<div id="1">Fall 2021</div>
<div id="2">Summer 2021</div>
</div>
</main>You can use data attributes to store which content you want to show when the user clicks it.
To do this, add a click event listener to each option that will loop through each possible content option and show the one whose id matches the value of the data attribute while hiding all other ones.
let dropdown = document.querySelector('.dropdown-select');
dropdown.addEventListener('click', (e) => {
if (dropdown.classList.contains('closed')) {
dropdown.classList.remove('closed');
} else {
dropdown.classList.add('closed');
}
});
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")
})).active {
color: purple;
}
.dropdown-select {
transition: all 0.2s ease;
overflow: hidden;
cursor: pointer;
border-top: 1px solid #E0E5EC;
}
.dropdown-select__title {
display: flex;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E0E5EC;
}
.dropdown-select__title h6 {
font-size: 0.75rem;
line-height: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.dropdown-select__title img {
width: 1.5rem;
height: 1.5rem;
margin-left: auto;
transition: all 0.2s ease;
}
.dropdown-select ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown-select .menu {
transition: all 0.2s ease;
}
.dropdown-select .menu li {
font-size: 1rem;
line-height: 1.5rem;
padding: 1rem 0;
font-weight: 800;
color: #005fec;
}
.dropdown-select__title, .dropdown-select .menu {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.dropdown-select.closed .menu {
height: 0;
}
.dropdown-select.closed img {
transform: rotate(180deg);
}
.tabbed-content {
padding: 0 1.5rem;
margin-top: 2rem;
}
.tabbed-content div{
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="1">Fall 2021</li>
<li data-target="2">Summer 2021</li>
</ul>
</div>
<div class="tabbed-content">
<div id="1" style="display:block">Fall 2021</div>
<div id="2">Summer 2021</div>
</div>
</main>