@freeman0204

Как скрыть и открыть плавно блок что бы стрелочка переворачивалась вверх и вниз?

Код со стилями не сильно заморачивался. Суть в том что бы весь текст был скрыт, и под видео видна только ссылка больше и стрелочка вниз, а когда нажать на нее то кнопка плавно должна съехать вниз и показать скрытый текст и ее надпись должна помнятся на Меньше и стрелочка вверх. Подскажите как реализовать?
Я правильно сделал структуру html?
  • Вопрос задан
  • 1822 просмотра
Решения вопроса 1
Deonisius
@Deonisius
Родился в 11110110111 году, 11000 января.
Для поворота стрелочки, лучше её перенести в псевдоэлемент и при клике на ссылку, менять её класс, в котором разворачиваем стрелку на 180 градусов. Пример в песочнице
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@semki096
Можно на сss - htmlbook.ru/css/transform
Ответ написан
Комментировать
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Если хотите сделать подобное, то подразумевается, что у вас есть хотя бы базовые знания jQuery, а делается все очень просто с помощью animate, или вы хотите, чтобы вам дали готовый скрипт ?)
Ответ написан
kashamalasha
@kashamalasha
Поворот стрелки можно так реализовать. Остальное через JS.
<style>
.test {
  position: relative;
  width: 100px;
  height: 20px;
  outline: 1px solid red;
  transition: all 2s linear;
}

.more {
  position: absolute;
  bottom: 0;
  left: 45px;
  color: blue;
  transition: all 2s linear;
}

.test:hover {
  height: 80px;
}

.test:hover > .more {
  transform: rotate(180deg);
}
</style>
<body>
<div class="test">
  <span class="more">&darr;</span>
</div>
</body>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы