Как оптимизировать скрытие/показание элементов div с минимальным количеством кода ⇐ CSS

[Гость]

Я хочу использовать один и тот же код для нескольких модулей на этой странице, и я уже пробовал другой метод, но, похоже, ничего не работает. я не хочу бесконечно дублировать существующие коды,

document.addEventListener('DOMContentLoaded', function () { constarrowDown = document.getElementById('стрелка вниз'); const contentContainer = document.getElementById('content-container'); arrowDown.addEventListener('click', function () { const content = document.getElementById('content'); если (contentContainer.style.maxHeight) { contentContainer.style.maxHeight = null; arrowDown.style.transform = 'поворот (0 градусов)'; } еще { contentContainer.style.maxHeight = content.scrollHeight + 'px'; arrowDown.style.transform = 'поворот (180 градусов)'; } }); }); #content-container { переполнение: скрыто; максимальная высота: 0; переход: максимальная высота 0,3 с; } #содержание { отступ: 10 пикселей; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #стрелка вниз { курсор: указатель; размер шрифта: 24 пикселей; переход: преобразование 0,3 с, замедление; ЭКСЕЛ ▼ [*]Основы Excel [*]Основы Excel [*]Формулы [*] Анализ данных [*]Диаграммы [*]Сводные таблицы [*]Поиск

Я пробовал использовать циклы for и классы, но ничего не получалось: анимация и отображение контента не работали