Как сделать чтобы класс вешался на все элементы с таким названием?

Question

[Евгений Жуков]

Есть ссылка и 10 блоков, с 6 по 10 блоки скрыты для display: none;
Есть код который по клику на ссылку должен открыть блоки которые были закрыты. Но этот код вешает display: block только на первый найденный элемент, как адаптировать его под все элементы с id filtrstyle?

$(document).ready(function() {
        	$('a#clickfilter').click( function(event){
	        	event.preventDefault();
				$('#filtrstyle') 
				.css('display', 'block')
	        });
         });

Comments

[Сергей delphinpro]

под все элементы с id filtrstyle?

id - от слова идентификатор

Идентифика́тор, ID (англ. data name, identifier — опознаватель) — уникальный признак объекта, позволяющий отличать его от других объектов
---
Идентификатор — Википедия

Уникальный признак, Карл! УНИКАЛЬНЫЙ!!!!

Answer 1

[gleendo]

Array.prototype.forEach.call(document.querySelectorAll(".firststyle"), item => item.style.display = "block");
// Использование одного и того же id для более чем одного элемента не есть хорошо.

demo

Comments

[Евгений Жуков]

Почему-то прилетает ошибка
Uncaught TypeError: Cannot read property 'addEventListener' of null

[gleendo]

Евгений Жуков: код скиньте в песочнице

[Евгений Жуков]

iamevg_: profix24.ru/shop/784/747/

[gleendo]

Евгений Жуков: У вас же "clickfilter" это id, а не класс. Укажите тогда

document.querySelector("#clickfilter").addEventListener("click", event => {
  // some code
}, false);

[Евгений Жуков]

iamevg_: поставил класс, вместо ID толку 0

[gleendo]

Евгений Жуков: Попробуйте переместить блок script в конец body

Answer 2

[Дмитрий Ким]

ID не должен повторятся, на то он и ID. Повешайте класс .filtrstyle, и тогда пишите так:

$(document).ready(function() {
        $('a#clickfilter').click( function(event){
            event.preventDefault();
            $('.filtrstyle').show();
        });
    });