Ну во-первых зачем 5 штук document.ready?
Код-шутка 1$(document).ready(function() {
$('.open__sub-filtr').click(function(event) {
$('.open__sub-filtr, .sub-filtr').toggleClass('active');
});
$('.open__sub-filtr-2').click(function(event) {
$('.open__sub-filtr-2, .sub-filtr-2').toggleClass('active');
});
$('.open__sub-filtr-3').click(function(event) {
$('.open__sub-filtr-3, .sub-filtr-3').toggleClass('active');
});
$('.open__sub-filtr-4').click(function(event) {
$('.open__sub-filtr-4, .sub-filtr-4').toggleClass('active');
});
$('.open__sub-filtr-5').click(function(event) {
$('.open__sub-filtr-5, .sub-filtr-5').toggleClass('active');
});
});
Не глянув вашу структуру HTML кода могу посоветовать только кривое решение, которое решением то назвать сложно. Кроме того у вас нелогичные имена классов, перед классом с именем
open__sub-filtr-2 по мнению компьютера идет отнюдь не
open__sub-filtr а
open__sub-filtr-1, поэтому простой итерацией говнокодить тоже не получится:
Код-шутка 2
$(document).ready(function() {
for (var i = 0; i < 5; i++) {
$('.open__sub-filtr-'+i).click(function(event) {
$('.open__sub-filtr-'+i+', .sub-filtr-'+i).toggleClass('active');
});
}
});
Вангую, что ваши эти все элементы являются дочерними для какого-то другого элемента, поэтому их легко можно перебрать циклом, и указывая не эти БЭМ-классы в качестве указателя, а номер дочернего элемента. Так будет правильно.
А теперь, чтобы закрепить материал - гуглите Шура, гуглите. Ключевые слова - выше.
