Скрыть таб при повторном клике

13 сентября 2021, 17:30

Решил покопаться с JS без использования jQuery. Простая задачка при наличии упомянутой библиотеки, но, все же.

Итак. Есть некий набор элементов с заголовком и содержимым. Я делаю список, основываясь на содержимом заголовка и вытаскивая ID из каждого блока. После формирования списка, скрываю все блоки и делаю простые табы. То есть, при нажатии на пункт списка, идет сравнение ID и открывается нужный блок.

Теперь вопросы:

Как сделать так, чтоб при повторном нажатии на пункт списка, блок скрывался? Попытки записать эту строчку document.getElementById(filterName).style.display = 'block'; с условием результата не дают, почему-то, на повторное нажатие она не реагирует.
Просто окинуть проф.взглядом, можно ли что-то записать более коротко и корректно, если что-то колхозно сделано.

var a = document.querySelectorAll('.filter-area > .element'), 
  b = document.querySelectorAll('.filter-area > .element > h2'), 
  c = '', 
  d = document.getElementsByClassName('filter_list'), 
  i; 
 
for (i = 0; i < a.length; i++) { 
  c += '<div class="fl-item" onclick="openFilter(event, \'' + a[i].id + '\')">' + b[i].innerHTML + '</div>'; 
  a[i].style.display = 'none'; 
} 
window.filter_list.innerHTML = c; 
 
function openFilter(evt, filterName) { 
  for (i = 0; i < a.length; i++) { 
    a[i].style.display = 'none'; 
  } 
  for (i = 0; i < d.length; i++) { 
    d[i].className = d[i].className.replace(' active', ''); 
  } 
  document.getElementById(filterName).style.display = 'block'; 
  evt.currentTarget.className += ' active'; 
}

<div id="filter_list" class="filter_list"></div> 
<div class="filter-area"> 
  <div class="element" id="e1"><h2>Title 1</h2><p>Dummy</p></div> 
  <div class="element" id="e2"><h2>Title 2</h2><p>Text</p></div> 
  <div class="element" id="e3"><h2>Title 3</h2><p>Here</p></div> 
</div>

Спасибо за любые мысли)

Answer 1

var a = document.querySelectorAll('.filter-area > .element'), 
  b = document.querySelectorAll('.filter-area > .element > h2'), 
  c = '', 
  d = document.getElementsByClassName('filter_list'), 
  i; 
 
for (i = 0; i < a.length; i++) { 
  c += '<div class="fl-item" onclick="openFilter(event, \'' + a[i].id + '\')">' + b[i].innerHTML + '</div>'; 
  a[i].style.display = 'none'; 
} 
window.filter_list.innerHTML = c; 
 
function openFilter(evt, filterName) { 
  var wasVisible = document.getElementById(filterName).style.display != 'none'; 
  for (i = 0; i < a.length; i++) { 
    a[i].style.display = 'none'; 
  } 
  for (i = 0; i < d.length; i++) { 
    d[i].className = d[i].className.replace(' active', ''); 
  } 
  document.getElementById(filterName).style.display = wasVisible? 'none' : 'block'; 
  evt.currentTarget.className += ' active'; 
}

<div id="filter_list" class="filter_list"></div> 
<div class="filter-area"> 
  <div class="element" id="e1"> 
    <h2>Title 1</h2> 
    <p>Dummy</p> 
  </div> 
  <div class="element" id="e2"> 
    <h2>Title 2</h2> 
    <p>Text</p> 
  </div> 
  <div class="element" id="e3"> 
    <h2>Title 3</h2> 
    <p>Here</p> 
  </div> 
</div>