Задать вопрос
@freeman0204
javascript

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

Код со стилями не сильно заморачивался. Суть в том что бы весь текст был скрыт, и под видео видна только ссылка больше и стрелочка вниз, а когда нажать на нее то кнопка плавно должна съехать вниз и показать скрытый текст и ее надпись должна помнятся на Меньше и стрелочка вверх. Подскажите как реализовать?
Я правильно сделал структуру html?
  • Вопрос задан
  • 2771 просмотр
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Deonisius
@Deonisius
Родился в 11110110111 году, 11000 января.
Для поворота стрелочки, лучше её перенести в псевдоэлемент и при клике на ссылку, менять её класс, в котором разворачиваем стрелку на 180 градусов. Пример в песочнице
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@semki096
Можно на сss - htmlbook.ru/css/transform
Ответ написан
Комментировать
Комментировать
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
Если хотите сделать подобное, то подразумевается, что у вас есть хотя бы базовые знания jQuery, а делается все очень просто с помощью animate, или вы хотите, чтобы вам дали готовый скрипт ?)
Ответ написан
2 комментария
2 комментария
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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка Roguelike-игры на Unity для Android
26 дек. 2024, в 01:11
120000 руб./за проект
Доработка веб-платформы на PHP
26 дек. 2024, в 00:27
35000 руб./за проект
Нарисовать обложку для рекламной кампании в VK Ads
25 дек. 2024, в 22:59
1000 руб./в час
Ещё заказы