Почему не работает querySelectorAll на второй константе?

Question

[Shalindor]

const btn = document.querySelectorAll(".btn");
const content = document.querySelectorAll(".content--visible");
btn.forEach(btn => {
   btn.addEventListener("click", () => {
      if (content.classList.contains("content--hidden")) {
         btn.textContent = "Скрыть";
      } else {
         btn.textContent = "Показать ещё";
      }

      content.classList.toggle("content--hidden");
   });
});

выбивает ошибку TypeError: content.classList is undefined

вот рабочий вариант без querySelectorAll https://codepen.io/shalindor/pen/WNzwzKW но мне нужно чтобы работало со всеми классами

Answer 1

[n1ksON]

Потому что querySelectorAll возвращает NodeList (массив html-элементов).
Чтоб работало со всеми классами, используйте метод forEach

Comments

[Shalindor]

получеться в этом forEach написать ещё один forEach только для content
ведь мне нужно чтобы класс элемента менялся при нажатии на кнопку

btn.forEach(btn => {
   btn.addEventListener("click", () => {
      if (content.classList.contains("content--hidden")) {
         btn.textContent = "Скрыть";
      } else {
         btn.textContent = "Показать ещё";
      }

      content.classList.toggle("content--hidden");
   });
});

если я где-то не прав прошу поправить меня.
Можете пожалуйста написать пример или решение я совсем новичок в js пока что не представляю как это реализовать.