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

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

Код со стилями не сильно заморачивался. Суть в том что бы весь текст был скрыт, и под видео видна только ссылка больше и стрелочка вниз, а когда нажать на нее то кнопка плавно должна съехать вниз и показать скрытый текст и ее надпись должна помнятся на Меньше и стрелочка вверх. Подскажите как реализовать?
Я правильно сделал структуру html?
  • Вопрос задан
  • 2637 просмотров
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
10000 руб./за проект
Ещё заказы