I am trying to implement a accordion block onto my website but am having a problem implementing the functionality that makes up an accordion block. I followed an entire YouTube tutorial for this so not sure why it’s not working. I believe the problem is with my JavaScript and maybe the .active code in my CSS but not entirely sure as I’m just a week old into learning JS.

Here’s a link to the tutorial I followed, in case needed:

This is what my current code looks like, I also troubleshooted the JS code and have attached that code as well. Both codes have not solved the problem. Also I did check the browser console just in case and there are no errors on there.

JS Trouble Shoot Code

const accordionLabels = document.querySelectorAll('.accordion-content .accordion-label');

accordionLabels.forEach(label => {
  label.addEventListener('click', function() {
    const accordionContent = this.parentElement;
    accordionContent.classList.toggle('active');
  });
});

JS Original Code

// Accordion Code Starts Here

const accordion = document.getElementsByClassName('accordion-content');

for (i = 0; i<accordion.length; i++) {
  accordion[i].addEventListener('click', function() {
    this.classList.toggle('active')
  })
}

// Accordion Code Ends Here

CSS

/* Styles for Accordian block in left section of body3 */

.accordion-block {
  max-width: 500px;
  background-color: brown;
}

.accordion-block .accordion-content {
  position: relative;
  margin: 10px 0px;
  background-color: aqua;
}

.accordion-block .accordion-content .accordion-label {
  position: relative;
  padding: 10px;
  padding-left: 0px;
  background-color: beige;
  cursor: pointer;
}

.accordion-block .accordion-content .accordion-label::before {
  background-color: yellow;
  content: '+';
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 1.5em;
}

.accordion-block .accordion-content.active .accordion-label::before {
  content: '-';
}

.accordion-block .accordion-content .accordion-text {
  position: relative;
  background-color: aquamarine;
  height: 0;
  overflow: hidden;
  transition: 0.5s;
  overflow-y: auto;
}

.accordion-block .accordion-content.active .accordion-text {
  height: auto;
  padding: 10px;
}

HTML

<div class="accordion-block">

            <div class="accordion-content">
              <div class="accordion-label">Sneaker Customization</div>
              <div class="accordion-text">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
            </div>

            <div class="accordion-content">
              <div class="accordion-label">Sneaker Restoration</div>
              <div class="accordion-text">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
            </div>

            <div class="accordion-content">
              <div class="accordion-label">Stock Sourcing</div>
              <div class="accordion-text">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </p>
              </div>
            </div>

          </div>