Как реализовать display: block по событию onclick одному div и при этом всем раннее открытым из 36 штук — display: none на чистом js?
Разные классы не нужны, достаточно одного общего:.ranging {
  display: none;
}

.ranging.opened {
  display: block;
}document.addEventListener('click', function(e) {
  if (e.target.classList.contains('selector')) {
    const index = [...document.querySelectorAll('.selector')].indexOf(e.target);
    document.querySelectorAll('.ranging').forEach((n, i) => n.classList.toggle('opened', i === index));
  }
});
Если надо без классов
<div id="ranging_1" class="ranging">
    ... еще много дочерних элементов разного типа ...
  </div>
  <div id="ranging_2" class="ranging">
    ... еще много дочерних элементов разного типа ...
  </div>
  <div id="ranging_3" class="ranging">
    ... еще много дочерних элементов разного типа ...
  </div>

  ...

  <a class="selector" href="#" data-rating-id='ranging_1'>Клац</a>
  <a class="selector" href="#" data-rating-id='ranging_2'>Клац</a>
  <a class="selector" href="#" data-rating-id='ranging_3'>Клац</a>
var rangings = [].slice.call(document.querySelectorAll('.ranging'));
var selectors = [].slice.call(document.querySelectorAll('.selector'));
selectors.forEach(function(selector) {
  selector.addEventListener('click', function(e) {
    e.preventDefault();
    var ranging = document.getElementById(e.target.dataset.ratingId);
    ranging.style.display = '';
    rangings.forEach(function(item) {
      if (item.id !== e.target.dataset.ratingId) {
        item.style.display = 'none';
      }
    })
  });
})