Léxico capilar

document.addEventListener('DOMContentLoaded', function() { // Находим все кнопки и все блоки const buttons = document.querySelectorAll('.filter .filter-btn'); const blocks = document.querySelectorAll('.letter-block'); // Обработчик клика function onClick() { const letter = this.getAttribute('data-letter'); // e.g. "A", "0-9", "ALL" // Подсветим активную кнопку buttons.forEach(btn => btn.classList.toggle('active', btn === this)); // Показ/скрытие блоков blocks.forEach(block => { const id = block.id.toUpperCase(); // e.g. "LETTERA" if (letter === 'ALL') { block.style.display = ''; } else if (letter === '0-9') { // цифры: покажем тот, чей id exactly "LETTER0-9" block.style.display = (id === 'LETTER0-9') ? '' : 'none'; } else { block.style.display = (id === 'LETTER' + letter.toUpperCase()) ? '' : 'none'; } }); } // Навешиваем onClick и сразу прячем/показываем под ALL buttons.forEach(btn => { btn.addEventListener('click', onClick); }); // Инициализация: все видны onClick.call(document.querySelector('.filter-btn[data-letter="ALL"]')); }); .lexikon .filter-btn.showAll, .lexikon .filter-btn.zahl { width: auto !important; padding: 0 12px !important; min-width: 0; }