Як показати/сховати елемент по кліку

Як на мене, це найпростіший варіант, коли потрібно показати і приховати елемент натисканням однієї кнопки. Я, наприклад, завжди так реалізую меню для мобільних пристроїв.

HTML-код кнопки і прихованого блоку.

<a href="javascript:void(0);" onclick="show('hidden');">Click</a>

<div id="hidden">
Hello world!
</div>

CSS-код прихованого блоку.

#hidden:not(.show){
    display:none;
}

JavaScript функція.

function show(id){

    let element = document.getElementById(id);

    if (element.classList.contains('show')) {
        element.classList.remove('show');
    } else {
        element.classList.add('show');
    }
}

Принцип роботи дуже простий. Функція “show” робить перевірку наявності класу “show” у елемента “hidden”. Якщо такого класу нема, то він додається, а якщо є, то він видаляється. Залежно від наявності класу “show” у елемента змінюється параметр display.