Как скрыть блок при повторном нажатии на javascript?

Question

[Boooom]

Всем привет

Не могу скрыть блок при повторном нажатии на javascript

<style>
    .dropdown2-content{display: none}
    .dropdown2-content.show{display: block}
</style>
<div class="dropdown2">
    <button onclick="navFunction('m1')" class="dropbtn2">Жмяк1</button>
    <div id="m1" class="dropdown2-content">
        Блок1
    </div>
</div>
<div class="dropdown2">
    <button onclick="navFunction('m2')" class="dropbtn2">Жмяк2</button>
    <div id="m2" class="dropdown2-content">
        Блок2
    </div>
</div>
<script>
    function navFunction(id) {
        var dropdowns = document.getElementsByClassName("dropdown2-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            openDropdown.classList.remove('show');
        }
        document.getElementById(id).classList.toggle('show');
    }
</script>

Подскажите как это сделать

Answer 1

[0xD34F]

function navFunction(id) {
  document.querySelectorAll('.dropdown2-content').forEach(n => {
    n.classList[n.id === id ? 'toggle' : 'remove']('show');
  });
}

Answer 2

[RAX7]

Потому что ты сначала удаляешь класс .show со всех .dropdown2-content

for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            openDropdown.classList.remove('show');
        }

А затем опять его добавляешь, но уже для нажатого элемента.

document.getElementById(id).classList.toggle('show');

https://jsfiddle.net/t1hjyc9s/

Answer 3

[Павел Корнилов]

Я бы сделал так:


https://codepen.io/KorniloFF/pen/wNWMXR?editors=1111

Тогда всё будет работать при любом количестве кнопок.