Darkgohn95,
css!!!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#supportField{
height: 400px;
width: 300px;
position: fixed;
bottom: -422px;
right: 30px;
transition: 1s;
}
#supportField.up{
bottom : 40px;
}
#service {
border-top-right-radius: 20%;
width: 296px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
display: block;
}
h5 {
padding-top: 20px;
}
#form1 {
background-color: rgb(187, 187, 196);
width: 297px;
display: block;
}
#emptySpace {
width: 290px;
background-color: aliceblue;
width: 296px;
height: 230px;
display: block;
}
#messageBox {
width: 270px;
height: 70px;
display: block;
padding-left: 10px;
margin-left: 13px;
margin-bottom: 5px;
}
#sendButton {
background-color: rgb(48, 125, 246);
color: azure;
border-radius: 10%;
border-color: rgb(48, 125, 246);
display: block;
margin-left: 220px;
margin-bottom: 10px;
}
#hiddenField {
border-top-right-radius: 20%;
width: 297px;
height: 60px;
background-color: rgb(48, 125, 246);
color: azure;
text-align: center;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: fixed;
bottom: 6px;
right: 33px;
transition: .3s .9s;
}
#hiddenField.hide{
transition-delay: 0s;
transform: scale(0);
opacity: 0
}
#hiddenField:hover {
background-color: rgb(19, 73, 158);
border-top-right-radius: 20%;
color: white;
}
</style>
<script>
//////////////////////////////////////////////Function doesn'works//////////////////////////////////////////////////
function moveUp(){
document.getElementById("supportField").classList.add("up");
document.getElementById("hiddenField").classList.add("hide");
}
//////////////////////////////////////////////Function works//////////////////////////////////////////////////
function moveDown() {
document.getElementById("supportField").classList.remove("up");
document.getElementById("hiddenField").classList.remove("hide");
}
</script>
</head>
<body>
<!-- Contact field -->
<div id="hiddenField" onclick="moveUp()"><h5>Kontakta oss</h5></div>
<div id="supportField">
<button onclick="moveDown()">Сlose</button>
<div id="service"><h5>Kontakta vår kundservice online</h5></div>
<div id="emptySpace"></div>
<form id="form1" action="#" method="#">
<textarea id="messageBox" name="message" placeholder="Your message" rows="4" cols="40"></textarea>
<button id="sendButton" type="submit" value="Skicka">Skicka</button>
</form>
</div>
</body>
</html>