Складная коробка в HTML/CSS ⇐ Html

[Гость]

У меня есть следующее поле:

[*] Пример Текста .tile-container { дисплей: гибкий; } .прямоугольник { цвет фона: # 0051a5; поле: 5 пикселей; дисплей: блок; курсор: указатель; высота: 200 пикселей; гибкий: 1; граница-радиус: 23 пикселей; положение: относительное; /*должен быть относительным, чтобы действовать как контейнер плитки для класса метки плитки*/ } .плюс { дисплей: встроенный блок; фон: линейный градиент (#73716d 0 0), линейный градиент (#73716d 0 0), #ффф; фоновая позиция: центр; размер фона: 60% 2,5 пикселей, 2,5 пикселей 60%; фоновое повторение: без повторения; } .радиус { радиус границы: 50%; плавать: вправо; ширина: 25 пикселей; высота: 25 пикселей; позиция: абсолютная; справа: 25 пикселей; верх: 25 пикселей; } .tile-label { семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 25 пикселей; преобразование текста: верхний регистр; вес шрифта: 600; белый цвет; позиция: абсолютная; внизу: 25 пикселей; слева: 25 пикселей; } .tile-accent { белый цвет; } Итак, я пытался реализовать функцию раскрывающегося/сворачиваемого списка с помощью функции переключения javascript, но она не работала должным образом. По сути, всякий раз, когда пользователь нажимает на синее поле, оно должно разворачиваться внизу, а под основным заголовком появляется скрытый текст, поэтому по сути это похоже на складную кнопку, где, если вы нажмете на нее, поле развернется внизу.

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

Вот что я пробовал:

document.querySelector('.rectangle').addEventListener('click', function() { this.classList.toggle('расширенный'); const plus = this.querySelector('.plus'); plus.style.transform = this.classList.contains('расширенный') ? 'поворот (45 градусов)': 'поворот (0)'; }); .tile-container { дисплей: гибкий; } .прямоугольник { цвет фона: #0051a5; поле: 5 пикселей; дисплей: блок; курсор: указатель; высота: 100 пикселей; /* Уменьшена высота для лучшей видимости */ гибкий: 1; радиус границы: 23 пикселя; положение: относительное; переход: высота 0,3с, легкость; /* Добавляем переход для плавной анимации */ } .плюс { отображение: встроенный блок; фон: линейный градиент (#0051a5 0 0), линейный градиент (#0051a5 0 0), #fff; фоновая позиция: центр; размер фона: 60% 2,5 пикселей, 2,5 пикселей 60%; фоновый повтор: без повтора; переход: легкость преобразования 0,3 с; /* Добавляем переход для плавной анимации */ } .радиус { радиус границы: 50%; плавать: вправо; ширина: 25 пикселей; высота: 25 пикселей; позиция: абсолютная; справа: 25 пикселей; верх: 25 пикселей; } .tile-label { семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 25 пикселей; преобразование текста: верхний регистр; вес шрифта: 600; цвет: #fff; позиция: абсолютная; внизу: 25 пикселей; слева: 25 пикселей; } .tile-accent { цвет: #FFC72C; } .скрытый-текст { дисплей: нет; семейство шрифтов: «PT Sans Narrow», без засечек; размер шрифта: 18 пикселей; цвет: #000; /* При необходимости измените цвет текста */ отступ: 10 пикселей 25 пикселей; позиция: абсолютная; внизу: 0; слева: 0; ширина: 100%; цвет фона: #fff; /* Цвет фона скрытой текстовой области */ } .expanded .rectangle { высота: 200 пикселей; /* Отрегулируйте расширенную высоту по мере необходимости */ } .расширенный .скрытый-текст { дисплей: блок; Пример Текста Пункт 1 [*]Пункт 2 [*]Пункт 3