Создайте складную карточку, используя HTML, CSS и JS.CSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Создайте складную карточку, используя HTML, CSS и JS.

Сообщение Anonymous »


Я пытаюсь создать складную карточку. У меня есть объект div, содержащий элементы HTML

.element { цвет фона: серый; нижняя граница: 0,7рем; отступ: 1,4рем; радиус границы: 10 пикселей; название разные строки текста....

автор

Хотя заголовок и автор состоят всего из одной строки текста, текст внутри элементов в принципе может состоять из нескольких строк.

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

Изображение
Первая карточка должна выглядеть так же, как вторая, и при нажатии раскрываться, чтобы отображать полный текст.
Я пытался решить эту проблему, установив свойство max-height в css, а затем изменив его в скрипте js при нажатии на карточке, но таким образом всегда отображается полный текст, а скрипт регулирует только высоту карточек.
У меня была идея разделить
на два элемента, что-то вроде
...

...

а затем измените свойство отображения remaining_text в сценарии js, но это кажется неправильным, если у меня есть много карточек для отображения таким образом.
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение
  • Как создать карточку, похожую на форму выбора, в HTML, CSS?
    Anonymous » » в форуме CSS
    0 Ответы
    50 Просмотры
    Последнее сообщение Anonymous
  • Почему одновременно открываются несколько карточек при нажатии на одну карточку в моих настройках HTML/CSS/JavaScript?
    Anonymous » » в форуме CSS
    0 Ответы
    30 Просмотры
    Последнее сообщение Anonymous
  • Как сделать горизонтальную карточку в Html/css
    Anonymous » » в форуме CSS
    0 Ответы
    22 Просмотры
    Последнее сообщение Anonymous
  • Как сделать горизонтальную карточку в Html/css [закрыто]
    Anonymous » » в форуме CSS
    0 Ответы
    26 Просмотры
    Последнее сообщение Anonymous
  • Не можете получить 3 -уровневую складную структуру в HTML - мой код JavaScript проблемой?
    Anonymous » » в форуме Html
    0 Ответы
    13 Просмотры
    Последнее сообщение Anonymous

Вернуться в «CSS»