Как сделать, что бы блок выезжал при клике по стрелке?

Question

[Владислав Михеев]

Блок на сайте сейчас выезжает через секунду после открыти, как сделать так, что бы он выезжал по клику на "стрелку" , стрелка вверх блок выезжает снизу , стрелка вниз блок прячется обратно.?

(Станица делалась под просмотр на конкретном устройстве, поэтому с общим отображением могут быть проблемы )) )

Answer 1

[Danny Arty]

У вас же уже написан скрипт для переключения класса у кнопки .uk, так добавьте туда переключение класса для блок .cardC

$(document).ready(function() {
  $('.uk').click(function() {
    $(this).toggleClass('open');
    $('.cardC').toggleClass('shown'); //например класс shown будет отвечать за состояние показан-скрыт
  });
});

И соответственно в стилях у cardC нужно убрать анимацию, но добавить transition. Также добавить стиль для .cardC.shown с нужным для вас значением translateY.

Comments

[Владислав Михеев]

Внёс изменения, результат меня устраивает, спасибо, но остался один вопрос, сейчас блок просто спускается вниз страницы и если пролистать ниже, то его видно, а если сделать display: none; , то пропадает анимация появления блока, он просто возникает в конечной точке, не подскажите как это исправить?

[Danny Arty]

Владислав Михеев, свойство display нельзя анимировать. Делайте например связку visibility + opacity