Как правильно будет сделать скрытие/открытие множества скрытых блоков на JS?

Question

[Максим Варава]

Друзья, есть такая проблема.
На сайте есть очень большое кол-во скрытых блоков, которые должны открываться по клику на соответствующую кнопку. Писать этот код к каждому блоку просто нереально, потому что их будет более 100 штук

$(document).ready(function () {
    $('body').on('click', "a#hide-second-block", function(){
        $('.current').addClass('hidden-block').slideToggle(400);
    });
	});

Как переписать код так, что бы при нажатии на соответствующую кнопку открывался соответствующий скрытый блок, при этом уже открытый блок не закрывался при открытии последующего. Заранее спасибо за советы.

Answer 1

[Ankhena]

Использовать родственные связи (через parent, next, prev и т.д.)
https://jsfiddle.net/ugdj55qw/

Comments

[Максим Варава]

Большое Вам спасибо за помощь, но не могли бы прояснить еще пару деталей.
Если повесить обработчик на Body div в моем случае

$('body div').click(function() {
  $(this).next('.block').toggleClass('active');

})

Будет использоваться AngularJS и что бы не было проблем с инициализацией попросили сделать общий объект на обработчик событий, так как это будет Single-Page Application и на внутренних страницах события могут не повеситься правильно.

[Ankhena]

Максим Варава, не поняла вопроса
чем $('body div') отличается от $('div') кроме лишней проверки для браузера, находится ли div внутри body.

[Kovalsky]

Максим Варава, если речь о делегировании, то на jQuery это делается как-то так:

$('body').on( 'click', 'div', handler );

Answer 2

[Андрей Федоров]

Почему не задействовать querySelectorAll? Так же можно не добавлять класс, а просто изменять css-свойство display.

Comments

[Ankhena]

а просто изменять css-свойство display

Есть риск не попасть в нужный display при возвращении его на место. Например, потому что в верстке сначала было block, а потом верстальщик все таки перешел на flex, а про скрипт естественно никто не помнит.
Надежнее все таки через класс.

[Kovalsky]

Ankhena, также можно сохранять изначальные значения, как-то так: element.data.old_styles[ 'display' ] = 'block'

[Ankhena]

Никита Полевой, либо так, но если там много блоков и возможна ситуация, что display был разный, то слишком много писать получается?
Но, может, это потому что я css люблю больше, чем js.