Скрыть\показать блок по клику js?

Question

[Денис]

Подскажите кто в js шарит, нужно по клику скрывать, показывать блок
html

<a href="#" id = "hider" class="toggle-menu-btn show_search"><i class="fa fa-search"></i> <i class="fa fa-close"></i></a>
<a href="/sale/configurator.php" id = "config-btn" class="toggle-menu-btn config btn-config"><i class="fa fa-cog fa-config"></i>конфигуратор</a>

js

document.getElementById('hider').onclick = function() {
      document.getElementById('config-btn').hidden = true;
    }

пример взял с инета, скрывать то он скрывает, но как обратно вернуть, не понимаю, пробовал в функцию прописать условие, если config-btn == hidden То тогда document.getElementById('config-btn').hidden = false;
примерно такое получилсь. но не работает ))

document.getElementById('hider').onclick = function() {
		if(document.getElementById('config-btn').hidden == true) {
	document.getElementById('config-btn').hidden = false;
}
      document.getElementById('config-btn').hidden = true;
    }

Comments

[alex-1917]

сложность поставил бы повыше, вопрос-то на самом деле сложнейший,чо уж тут скрывать...

Answer 1

[y0u]

1 способ
в JS:

document.getElementById('hider').onclick = function() {
  document.getElementById('config-btn').classList.toggle('hidden');
}

в CSS:

.hidden {
  display: none;
}

2 способ

document.getElementById('hider').onclick = function() {
	var el = document.getElementById('config-btn');
  el.style.display === 'none' ? el.style.display = 'initial' : el.style.display = 'none';
}

Comments

[Денис]

спс я уже первым сделал, все работает), тернарным конечно круче ))

[Василий Dekmer]

Благодарю. Спустя годы благодарность не менее огромна !!!