Javascript Question posted in
A very good W3school tutorial can be found here.

How to improve my JavaScript for my Accordion Menu to open

What am I doing wrong? Any idea how to make this accordion menu work?

I’ve been trying to figure out why my accordion menu for a Frontend Challenge isn’t working. It’s currently throwing the following error:

Uncaught TypeError: Cannot read properties of undefined (reading ‘toggle’) at HTMLButtonElement.<anonymous>

This error is from Google dev tools. My active class is defined in my css file. I’m trying to make it toggle between two classes when my button is active but I haven’t been able to activate it or toggle it at all.

Can someone help me get an idea of what’s going on?

These are snippets of my code.

const acc = document.getElementsByClassName("accordion_btn");
var i;

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", (event) => {
    this.classList.toggle("active");
    this.classList.toggle("accordion_btn:hover");

    const panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
.accordion_btn {
  width: 100%;
  background-color: hsl(0, 0%, 100%);
  text-align: left;
  border: none;
  outline: none;
  margin: 20px 0;
  transition: 0.4s;
}

.accordion_btn:hover {
  background-color: hsl(276, 51%, 90%);
}

.active {
  background-color: red;
}

.panel {
  font-weight: 400;
  color: hsl(292, 16%, 49%);
  display: none;
  overflow: hidden;
  margin-bottom: 20px;
  text-align: left;
}
<div class="accordion">
  <button class="accordion_btn">
  What is Frontend Mentor, and how will it help me?
  </button>
  <div class="panel">
    <p> Frontend Mentor offers...</p>
  </div>
</div>

<div class="accordion">
  <button class="accordion_btn">
    Is Frontend Mentor free?
  </button>
  <div class="panel">
    <p>Yes, Frontend Mentor...</p>
  </div>
</div>

<div class="accordion">
  <button class="accordion_btn">
    Can I use Frontend Mentor projects in my portfolio?
  </button>
  <div class="panel">
    <p>Yes...</p>
  </div>
</div>

<div class="accordion">
  <button class="accordion_btn">
    How can I get help if I'm stuck on a Frontend Mentor challenge?
  </button>
  <div class="panel">
    <p>The best place to...</p>
  </div>
</div>
</div>

I tried changing my variable declarations with var and const but that probably has nothing to do with it? I also tried adding defer to my script tag in my original HTML file.

Tags:

2

Answers


  1. 0

    Because this is pointing at the window object not your current accordion.

    So you simply just need to change every this to acc[i].

    For more information about this keyword I recommend reading this reference this-JavaScript | MDN

    Here is the working code

    const acc = document.getElementsByClassName("accordion_btn");
var i;

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", (event) => {
    acc[i].classList.toggle("active");
    acc[i].classList.toggle("accordion_btn:hover");

    const panel = acc[i].nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
    .accordion_btn {
    width: 100%;
    background-color: hsl(0, 0%, 100%);
    text-align: left; 
    border: none;
    outline: none;
    margin: 20px 0;
    transition: 0.4s; 
}

.accordion_btn:hover {
    background-color: hsl(276, 51%, 90%);
}

.active {
    background-color: red;
}

.panel {
    font-weight: 400;
    color: hsl(292, 16%, 49%);
    display: none;  
    overflow: hidden;
    margin-bottom: 20px;
    text-align: left;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="accordion">
      <button class="accordion_btn">
        What is Frontend Mentor, and how will it help me?
      </button>
      <div class="panel">
        <p>Frontend Mentor offers...</p>
      </div>
    </div>

    <div class="accordion">
      <button class="accordion_btn">Is Frontend Mentor free?</button>
      <div class="panel">
        <p>Yes, Frontend Mentor...</p>
      </div>
    </div>

    <div class="accordion">
      <button class="accordion_btn">
        Can I use Frontend Mentor projects in my portfolio?
      </button>
      <div class="panel">
        <p>Yes...</p>
      </div>
    </div>

    <div class="accordion">
      <button class="accordion_btn">
        How can I get help if I'm stuck on a Frontend Mentor challenge?
      </button>
      <div class="panel">
        <p>The best place to...</p>
      </div>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    don’t use arrow function,then you can the this；

    like this;

     const acc = document.getElementsByClassName("accordion_btn");
var i;

for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function(event) {
    this.classList.toggle("active");
    this.classList.toggle("accordion_btn:hover");

    const panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search