How to display different content based on dropdown menu selection?

Question

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>

Spectric · Accepted Answer · 2021-10-21 00:04:36Z

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>

@Millhorn Updated answer to show "Fall 2021" by default. Just apply display:block to that content option.

Collectives™ on Stack Overflow

How to display different content based on dropdown menu selection?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related