Как скрыть элементы между элементами с определённым классом?

Question

[sickgang]

Нужно, чтобы при клике на .item-service скрывались элементы, расположенные между кликнутым и следующим .item-service.
Как это сделать?

<tbody>
  <tr class="Item-service"></tr>
  <tr></tr>
  <tr></tr>
  <tr></tr>
  <tr class="Item-service"></tr>
  <tr></tr> 
  <tr></tr>
  <tr></tr>
</tbody>

Answer 1

[0xD34F]

По кому кликаем: const itemSelector = '.item-service';.

Как переключить видимость элементов, расположенных между кликнутым и следующим ему подобным:

function toggleUntilNextItem(el) {
  while ((el = el.nextElementSibling) && !el.matches(itemSelector)) {
    el.hidden ^= 1;
    // или (в стили надо будет добавить .hidden { display: none; })
    el.classList.toggle('hidden');
  }
}

Клики слушать можно непосредственно на интересующих нас элементах:

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggleUntilNextItem(e.currentTarget));

Или на каком-нибудь из их общих предков:

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(itemSelector)) && toggleUntilNextItem(t)
);

Comments

[sickgang]

Спасибо большое, работает!

Answer 2

[alexalexes]

На чистом JS будет так.

....
   <tr class="Item-service" onclick="hide_trs(this)"></tr>
....

function hide_trs(target)
  {
        var parent = target.parentNode;
        var tr_nodes = Array.prototype.slice.call(parent.getElementsByTagName('TR'));
        var tr_count = tr_nodes.length;
        var target_index = tr_nodes.indexOf(target);
        for(var i = target_index + 1; i < tr_count; i++)
        {
          var cur_tr = tr_nodes[i];
          if(cur_tr.className !== 'Item-service')
            cur_tr.style.display = 'none';
          else
            break;
        }
  }

PS: Есть ограничения:
1) В строках нельзя использовать вложенные таблицы ( tr_nodes - получит все строки вложенных таблиц в том числе);
2) Кликабельному tr нельзя добавить еще класс (идентификация следующего кликабельного tr производится строго по содержимому свойства класса cur_tr.className !== 'Item-service')