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

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

Код со стилями не сильно заморачивался. Суть в том что бы весь текст был скрыт, и под видео видна только ссылка больше и стрелочка вниз, а когда нажать на нее то кнопка плавно должна съехать вниз и показать скрытый текст и ее надпись должна помнятся на Меньше и стрелочка вверх. Подскажите как реализовать?
Я правильно сделал структуру html?
  • Вопрос задан
  • 2756 просмотров
Комментировать
Подписаться 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 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Дизайн главной страницы в figma
25 нояб. 2024, в 15:52
3000 руб./за проект
Chatgpt Google sheets
25 нояб. 2024, в 15:43
1500 руб./за проект
Написание статей в нужном стиле ( интерьер, дизайн спальни etc )
25 нояб. 2024, в 15:01
1000 руб./за проект
Ещё заказы