Как сделать чтобы скрипт работал для всех классов с описаным именем?

Question

[Shalindor]

С JS только недавно начал работать ни как не могу понять как заставить его работать для всех класс желательно сделать так чтобы он работал каждый в своём блоке. Извиняюсь за глупый вопрос облазил уже весь интернет не могу найти ответа.
Вот код:

const btn = document.querySelector(".btn");
const content = document.querySelector(".content--visible");

btn.addEventListener("click", btnClick);

function btnClick() {
   console.log(content.classList);

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

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

Answer 1

[Vladislav]

const btn = document.querySelectorAll(".btn")
https://developer.mozilla.org/ru/docs/Web/API/Docu...

Comments

[Shalindor]

Первым делом это сделал перед тем как задавать вопрос если так сделать скрипт тогда вообще не запускается и консоли пишет Error: Promised response from onMessage listener went out of scope

[Vladislav]

Shalindor, поясни, что твой скрипт должен делать? Какая роль на сайте?

[Shalindor]

Он должен при нажатии на кнопку у элемента с классом content--visible убирать класс content--hidden и если у него нету класса content--hidden то должно меняться текст кнопки. При использовании на одном элементе он полностью рабочий но мне нужно сделать несколько блоков с этим скриптом. Если коротко то это кнопка показать ещё которая показывает скрытые элементы и в кнопке меняется текст показать ещё на скрыть и обратно про при каждом клике

[Vladislav]

Shalindor, запили на codepen разметку и скрипт рабочий с одним блоком, посмотрим, что можно сделать

[Shalindor]

Vladislav, держи https://codepen.io/shalindor/pen/WNzwzKW
авансом спасибо большое тебе))