Multiple dropdowns, only one works even if I click another

user_14217078 0
Viewed 51

So, I am trying to complete one project and run into this problem: When I click any of the dropdowns, only the first one opens. I would really appreciate if someone helped me, as I am pretty new in programming.

Here is the HTML, so basically, when the user clicks on the area of "TextArrowSection" div, the dropdown shoudl open. When I coded this, I could achieve it with only one dropdown, however when I added one more, only the first one actually worked, even if I clicked on the second one.

<div class="textElement">
  <div class="textArrowSection">
    <p class="visibleText">How many team members can I invite?</p>
    <img src="/images/icon-arrow-down.svg" class="arrowImage" alt="arrow" />
  </div>
  <div class="dropdown">
    <p class="dropdownText closedText">
      You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
    </p>
  </div>
  <hr class="line" />
</div>
<div class="textElement">
  <div class="textArrowSection">
    <p class="visibleText">How many team members can I invite?</p>
    <img src="/images/icon-arrow-down.svg" class="arrowImage" alt="arrow" />
  </div>
  <div class="dropdown">
    <p class="dropdownText closedText">
      You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
    </p>
  </div>
  <hr class="line" />
</div>

CSS

.dropdownText {
  color: #787887;
  font-weight: 400;
  width: 315px;
  font-size: 12px;
  line-height: 18px;
}
.openedText {
  display: block;
}
.closedText {
  display: none;
}

JavaScript

"use strict";

const clickArea = document.getElementsByClassName(`textArrowSection`);
const text = document.querySelector(`.dropdownText`);
const arrow = document.querySelector(`.arrowImage`);
const dropDown = document.querySelector(`.dropdownText`);

const closeDropDown = function () {
  text.classList.remove(`openedText`);
  text.classList.add(`closedText`);
  arrow.classList.add(`arrowImageClosed`);
  arrow.classList.remove(`arrowImageOpened`);
};

const openDropDown = function () {
  text.classList.add(`openedText`);
  text.classList.remove(`closedText`);
  arrow.classList.add(`arrowImageOpened`);
  arrow.classList.remove(`arrowImageClosed`);
};
for (var i = 0; i < clickArea.length; i++) {
  clickArea[i].addEventListener(`click`, function () {
    if (dropDown.classList.contains("closedText")) {
      openDropDown();
    } else {
      closeDropDown();
    }
  });
}
drop-down-menu css javascript
1 Answers

You are just getting the first text, arrow element, you need to get all of them, use querySelectorAll and pass the index for the open and close dropdown functions.

Also consider using let instead of var.

const clickArea = document.getElementsByClassName(`textArrowSection`);
const text = document.querySelectorAll(`.dropdownText`);
const arrow = document.querySelectorAll(`.arrowImage`);
const dropDown = document.querySelectorAll(`.dropdownText`);

const closeDropDown = function(i) {
  text[i].classList.remove(`openedText`);
  text[i].classList.add(`closedText`);
  arrow[i].classList.add(`arrowImageClosed`);
  arrow[i].classList.remove(`arrowImageOpened`);
};

const openDropDown = function(i) {
  text[i].classList.add(`openedText`);
  text[i].classList.remove(`closedText`);
  arrow[i].classList.add(`arrowImageOpened`);
  arrow[i].classList.remove(`arrowImageClosed`);
};
for (let i = 0; i < clickArea.length; i++) {
  clickArea[i].addEventListener(`click`, function() {
    if (dropDown[i].classList.contains("closedText")) {
      openDropDown(i);
    } else {
      closeDropDown(i);
    }
  });
}
user_29519330
Related