Question 42409 in Html Question posted in
Some basic documentation can be found here.

toggle in dropdown menu is not function – Html

My dropdown icon is not showing and the option of the menu is not working well. I have tried using script to make it listed and show the text when I click the option, but it doesn’t work.

It seems that the toggle is not working and the menu is not being remove when I click the Job’s field.

const optionMenu = document.querySelector(".select-job"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  btn_next = optionMenu.querySelector(".btn-text");

selectBtn.addEvenListener("click", () => optionMenu.classList.toggle("active"));

options.forEach(option => {
  option.addEventListener("click", () => {
    let selectOption = option.querySelector(".option-text").innerText;
    btn_next.innerText = selectOption;

    optionMenu.classList.remove("active")
  })
})
.center h2 {
  font-size: 25px;
  font-weight: bold;
  width: 900px;
  text-align: center;
  padding: 60px;
}

.select-job {
  width: 400px;
  margin: 70px auto;
}

.select-job .select-btn {
  display: flex;
  height: 10px;
  background: #fff;
  padding: 20px;
  font-size: 18px;
  font-weight: 400px;
  border-radius: 8px;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.select-btn i {
  font-size: 25px;
  transition: 0.2s;
}

.select-job.active .select-btn {
  transform: rotate(-180deg);
}

.select-job .options {
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.select-job.active .options {
  display: block;
}

.options option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;
}

.options .option:hover {
  background: #F2F2F2;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}
<div class="wrapper2">
  <nav class="navbar">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">UPLOAD FILE</a></li>
      <li><a href="#">DETAILS</a></li>
      <li><a href="#">CLASSIFICATION</a></li>
      <li><a href="#">SHORTLISTED</a></li>
      <li><a href="#">ANALYSIS</a></li>
    </ul>
  </nav>
  <div class="select-job">
    <h2>Choose the job's field</h2>
    <div class="select-btn">
      <span class="btn-text">JOB's FIELD</span>
      <i class="fa-caret-down"></i>
    </div>

    <ul class="options">
      <li class="option">
        <span class="option-text">Information Technology and Software Development</span>
      </li>
      <li class="option">
        <span class="option-text">Digital Marketing</span>
      </li>
      <li class="option">
        <span class="option-text">Finance</span>
      </li>
    </ul>
  </div>
</div>
Tags:

2

Answers


  1. 0

    for the icon you did not include any css style to define if in your html
    and for the menu you need to write addEventListener instead of addEvenListener
    ( you miss spell the addEventListener method )

    Login or Signup to reply.
  2. 0

    As Oussama Ennadafy mentioned, you miss spelled addEventListener and didn’t define CSS for the icon ( Fontawesome CDN missing).

    1. On your CSS code you’re transform .select-job.active .select-btn, which means you’re transforming both text and icon inside select-btn div. But I think you want to rotate only the icon.

    2. You want to remove the menu after clicking the Job’s field,
      But I guess you want to hide the options ( menu ) after clicking the .select-btn div.

    You added display: block for options (menu) if .select-job has an active class. But you didn’t define display: hide for the menu.

    Check the updated code below-

    const optionMenu = document.querySelector(".select-job"),
  selectBtn = optionMenu.querySelector(".select-btn"),
  options = optionMenu.querySelectorAll(".option"),
  btn_next = optionMenu.querySelector(".btn-text");

//Miss spell addEventListener
selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));
options.forEach(option => {
  option.addEventListener("click", () => {
    let selectOption = option.querySelector(".option-text").innerText;
    btn_next.innerText = selectOption;

    optionMenu.classList.remove("active")
  })
})
    .center h2 {
  font-size: 25px;
  font-weight: bold;
  width: 900px;
  text-align: center;
  padding: 60px;
}

.select-job {
  width: 400px;
  margin: 70px auto;
}

.select-job .select-btn {
  display: flex;
  height: 10px;
  background: #fff;
  padding: 20px;
  font-size: 18px;
  font-weight: 400px;
  border-radius: 8px;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.select-btn i {
  font-size: 25px;
  transition: 0.2s;
}

.select-job.active .select-btn i {
  /* to rotate only the icon */
  transform: rotate(-180deg);
}

.select-job .options {
  display: none;
  /* missing display none*/
  position: relative;
  padding: 20px;
  margin-top: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.select-job.active .options {
  display: block;
}

.options option {
  display: flex;
  height: 55px;
  cursor: pointer;
  padding: 0 16px;
  border-radius: 8px;
  align-items: center;
  background: #fff;
}

.options .option:hover {
  background: #F2F2F2;
}

.option .option-text {
  font-size: 18px;
  color: #333;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="wrapper2">
  <nav class="navbar">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">UPLOAD FILE</a></li>
      <li><a href="#">DETAILS</a></li>
      <li><a href="#">CLASSIFICATION</a></li>
      <li><a href="#">SHORTLISTED</a></li>
      <li><a href="#">ANALYSIS</a></li>
    </ul>
  </nav>
  <div class="select-job">
    <h2>Choose the job's field</h2>
    <div class="select-btn">
      <span class="btn-text">JOB's FIELD</span>
      <i class="fa fa-caret-down" aria-hidden="true"></i> <!-- correct way to add Font awesome icon -->
    </div>

    <ul class="options">
      <li class="option">
        <span class="option-text">Information Technology and Software Development</span>
      </li>
      <li class="option">
        <span class="option-text">Digital Marketing</span>
      </li>
      <li class="option">
        <span class="option-text">Finance</span>
      </li>
    </ul>
  </div>
</div>

    Please check easy ways to use Font Awesome icon

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search