Как тут использовать document.getElementsByClassName?

Question

[sergey]

jsfiddle

Есть несколько блоков текста в разных секциях, при уменьшении экрана браузера до 768px, часть текста скрывается и появляется кнопка Показать.
вопрос в следующем, если один блок надо скрывать то все ок, но если несколько блоков которые идут не друг за другом нужно скрыть, то этот метод не действует. id не могут повторяться. Я решил присвоить блокам класс и с помощью document.getElementsByClassName искать необходимые элементы но тогда скрипт не работает.
Посоветуйте как обыграть эту ситуацию?

Comments

[Алексей Ярков]

у вас там id="text1" повторяется

[sergey]

Алексей Ярков: ну да

[sergey]

Алексей Ярков: я пытался применить классы, но безрезультатно

[Дмитрий Беляев]

SM: покажите свой код с классами

[sergey]

Дмитрий Беляев: https://jsfiddle.net/martynyuk/304dfa0L/4/

Answer 1

[Дмитрий Беляев]

document.getElementsByClassName возвращает коллекцию NodeList а не отдельный элемент
если нужно что-то сделать со всеми элементами в этой коллекции, то ее нужно пройти циклом:

function look(t) {
  var pList = document.getElementsByClassName(t);
  var l = document.getElementsByClassName("a-" + t)[0];
  for(var i = 0; i < pList.length; i++) {
    var p = pList[i];
    if (p.style.display == "block") {
      l.innerHTML = "Показать все";
      p.style.display = "none";
    } else {
      l.innerHTML = "скрыть";
      p.style.display = "block";
    }
  }
}

Answer 2

[Николай Семенов]

может Document.querySelectorAll(), не?