Хочу покрутить кнопку сворачивания описания на 90 градусов в правую сторону, когда описание скрыто, и обратно вниз, когда открыто.
Пробовал
.toggleClass('.flip'), добавлять transition & transform, просто ротэйт.
Как быть?
html, body {
margin: 0;
padding: 0;
min-width: 1440px;
font-family: "Arial";
background-color: #f5f5f5;
}
h2 {
font-variant: small-caps;
}
.fixed-container {
width: 960px;
margin: 0 auto;
position: relative;
}
.column-right {
float: right;
margin-top: 114px;
position: relative;
}
.add-task {
display: block;
width: 470px;
height: 500px;
background: #fff;
}
#taskName {
margin: 51px 40px;
width: 390px;
height: 45px;
background-color: #fcfcfc;
border: 1px solid #ebebeb;
border-radius: 0;
outline: 0;
font-size: 16pt;
}
#taskDesk {
margin: 0 40px;
width: 390px;
height: 230px;
background-color: #fcfcfc;
border: 1px solid #ebebeb;
border-radius: 0;
outline: 0;
font-size: 16pt;
resize: none;
}
.add-task input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
font-size: 16px;
}
#taskBut {
margin: 30px 206px 0 40px;
width: 224px;
height: 55px;
border: none;
background-color: #2174fd;
cursor: pointer;
color: #fff;
font-size: 16px;
outline: none;
}
.column-left {
float: left;
margin-top: 114px;
position: relative;
}
.item {
width: 470px;
background-color: #fff;
display: none;
margin-top: 20px;
}
.header {
height: 50px;
border: 1px solid #ebebeb;
}
.descript {
max-height: auto;
font-size: 14px;
color: #8993ad;
padding: 10px 20px;
word-wrap: break-word;
}
.item .btn-close {
margin: 18px 0;
font-weight: bold;
background-color: #fff;
color: red;
border-style: hidden;
outline: none;
}
.item .btn-show {
float: right;
margin: 20px 20px;
font-weight: bold;
background-color: #fff;
border-style: hidden;
outline: none;
transition: 1s;
}
.flip {
transform: rotate(90deg);
}
.item span {
font-weight: bold;
margin-left: 20px;
}
$(document).ready(function() {
var i = 1;
function addTask() {
var tasker = $('.add-task').parent();
var taskAdd = $('#taskItem').clone().addClass('gee_' + i).removeAttr('id').appendTo('.column-left').show();
taskAdd.removeClass('task-add');
$('.empty-list span').replaceWith();
taskAdd.find('.header span').text(tasker.find('#taskName').val());
taskAdd.find('.descript').text(tasker.find('#taskDesk').val());
taskAdd.removeAttr('id');
i++;
}
$('#taskBut').on('click', function() {
addTask();
$(this).closest('form').find('input[type=text], textarea').val('');
return false;
});
$('.column-left').on('click', '.btn-close', function() {
$(this).parents('.item').remove();
});
$('.column-left').on('click', '.btn-show', function() {
$(this).closest('.item').find('.descript').slideToggle(500);
});
$('.btn-show').on('click', function() {
$(this).toggleClass('.flip');
});
});
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Дела</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="fixed-container">
<section class="column-left">
<h2>Список дел:</h2>
<div class="empty-list">
<span>Список пуст...</span>
</div>
<div class="item task-add" id="taskItem">
<div class="header">
<span></span>
<button class="btn-close">X</button>
<button class="btn-show">V</button>
</div>
<div class="descript"></div>
</div>
</section>
<section class="column-right">
<h2>Добавить новое дело</h2>
<form class="add-task">
<input id="taskName" name="taskName" type="text" placeholder="*Название">
<textarea id="taskDesk" name="taskDesk" placeholder="*Описание"></textarea>
<button id="taskBut">Добавить дело</button>
</form>
</section>
</main>
<script src="jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
