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

[Гость]

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

Пример Текста .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-класс скрытого списка и использовать его для переключения между моментами, когда пользователь щелкает поле, но он продолжал отображать текст поверх поля вместо расширения поля и текст отображается под основным заголовком. Вместо этого текст отображался поверх поля или основного заголовка. Как я могу сделать так, чтобы всякий раз, когда пользователь нажимал на поле, оно плавно расширялось вниз, а под заголовком появлялся скрытый текст.