I am trying to add a Dropdown menu wit HTML, CSS and Javascript

Question

I am trying to add a dropdown menu to the dropdown class of my mini project. I have been able to do this for the second bar and it works but it is not working for the first one. I just started learning html, css and javascript and I am trying to replicate a hotel's homepage.

This is the HTML. I only included the dropdown menu part.

<div class = "dropdown">
      <a href="#">Currency</a>
    <div class ="dropdown-content">
      <a href="">Naira</a>
      <a href="">Dollar</a>
      <a href="">Euro</a>
      <a href="">Pound</a>
    </div>
    </div>
    <div class = "dropdown2">
      <a href="#">Language</a>
    <div class ="dropdown-content2">
      <a href="">English</a>
      <a href="">French</a>
    </div>
    </div>

This is the CSS. Only included stylings for the dropdown menu too.

.dropdown{
  position: relative;
  display: inline-block;
}
.dropdown a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}
.dropdown-content{
  position: absolute;
  z-index: 1;
}
.dropdown-content a{
  display: none;
  padding: 10px 36px;
  margin-top: 2px;
  text-align: center;

}
.dropdown{
  position: relative;
  display: inline-block;
}
.dropdown a {
  text-decoration: none;
  cursor: pointer;
  color: black;
}
.dropdown-content{
  position: absolute;
  z-index: 1;
  display: none;
}
.dropdown-content a{

  padding: 20px 0;
  margin-top: 10px;
  text-align: center;

}
.dropdown2{
  position: relative;
  display: inline-block;
  padding-left: 40px;
}
.dropdown2 a{
  text-decoration: none;
  cursor: pointer;
  color: black;
}
.dropdown-content2{
  position: absolute;
  z-index: 1;
  display: none;
}
.dropdown-content2 a{

  padding: 20px 0;
  margin-top: 10px;
  text-align: center;

}

This is the Javascript. The second dropdown 2 works but the first does not.

document.querySelector('.dropdown').addEventListener('click', function(){
  var content = document.querySelector('.dropdown-content');
  if (content.style.display==='none') {
    content.style.display = 'block';

  } else {
    content.style.display = 'none';
  }

})



document.querySelector('.dropdown2').addEventListener('click', function(){
  var content2 = document.querySelector('.dropdown-content2');
  if (content2.style.display==='none') {
    content2.style.display = 'block';

  } else {
    content2.style.display = 'none';
  }

})

Answer 1

1. Remove display: none; from `.dropdown-content a{...}.
2. Place display:none; in the inline query for both dropdown-content and dropdown-content2 .

 document.querySelector('.dropdown').addEventListener('click', function() { var content = document.querySelector('.dropdown-content'); if (content.style.display === 'none') { content.style.display = 'block'; } else { content.style.display = 'none'; } }); document.querySelector('.dropdown2').addEventListener('click', function() { var content2 = document.querySelector('.dropdown-content2'); if (content2.style.display === 'none') { content2.style.display = 'block'; } else { content2.style.display = 'none'; } });

 .dropdown { position: relative; display: inline-block; }.dropdown a { text-decoration: none; cursor: pointer; color: black; }.dropdown-content { position: absolute; z-index: 1; }.dropdown-content a { padding: 10px 36px; margin-top: 2px; text-align: center; }.dropdown { position: relative; display: inline-block; }.dropdown a { text-decoration: none; cursor: pointer; color: black; }.dropdown-content { position: absolute; z-index: 1; display: none; }.dropdown-content a { padding: 20px 0; margin-top: 10px; text-align: center; }.dropdown2 { position: relative; display: inline-block; padding-left: 40px; }.dropdown2 a { text-decoration: none; cursor: pointer; color: black; }.dropdown-content2 { position: absolute; z-index: 1; display: none; }.dropdown-content2 a { padding: 20px 0; margin-top: 10px; text-align: center; }

 <div class = "dropdown"> <a href="#">Currency</a> <div class ="dropdown-content" style="display:none;"> <a href="">Naira</a> <a href="">Dollar</a> <a href="">Euro</a> <a href="">Pound</a> </div> </div> <div class = "dropdown2"> <a href="#">Language</a> <div class ="dropdown-content2" style="display:none;"> <a href="">English</a> <a href="">French</a> </div> </div>

Answer 2

You should create two CSS classes to handle the behavior in your script. Here's is en example:

sample.html

<div class="dropdown" id="dd1">
    Currency
    <div class="dropdown-content hidden" id="dc1">
        <a href="">Item 1</a>
        <a href="">Item 2</a>
        <a href="">Item 3</a>
        <a href="">Item 4</a>
        <a href="">Item 5</a>
    </div>
</div>

Note that containers has class hidden by default.

sample.css

.dropdown {
    position: relative;
    display: inline-block;

    border: 1px solid red;
}

.dropdown-content {
    position: absolute;
    z-index: 1;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

Only use.hidden or.visible classes to display the container. This brings a bit of scalability to your web, so you can standarize this dropdown behavior.

sample.js

changeClass = (id) => {
    const element = document.querySelector(`#${id}`);
    if (element.classList.contains('hidden')) 
        swapClasses(element.classList, 'hidden', 'visible');
    else 
        swapClasses(element.classList, 'visible', 'hidden');
};

swapClasses = (list, toRemove, toAdd) => {
    list.remove(toRemove);
    list.add(toAdd);
}

document.querySelector('#dd1').addEventListener('click', () => {
    changeClass('dc1');
});

document.querySelector('#dd2').addEventListener('click', () => {
    changeClass('dc2');
});

Hope it helps. Any issue or question, please let me know.