Нужно перемесить div элемент в первоначальное положение


#1

Здравствуйте! У меня возникла следующая проблема. Дело в том, что мне нужно сделать окно при нажатии на которое, показывалась бы форма, в которой можно связаться с консультантом. Я написал одну функцию, чтобы большое окно отодвигалось до маленького окна вниз и исчезало. Она работает. Теперь мне нужно сделать так, чтобы при нажатии на маленькое окно, большое окно выдвигалось бы обратно вверх в прежнее положение.
ниже я выложил код и gif анимацию в архиве. Буду благодарен если сможете чем-нибудь помочь!

===================================================================================

CSS

#supportField{
height: 400px;
width: 300px;
display: block;
position: fixed;
top: 422px;
right: 30px;
}

#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;
top: 756px;
right: 33px;
}

#hiddenField:hover {

background-color: rgb(19, 73, 158);
border-top-right-radius: 20%;
color: white;

}

===================================================================================

HTML

01 <!-- Contact field -->

02

03 < div id = "hiddenField" onclick = "moveUp()" >< h5 >Kontakta oss</ h5 ></ div >

04

05

06 < div id = "supportField" >

07 < button onclick = "moveDown()" >Сlose</ button >

08 < div id = "service" >< h5 >Kontakta vår kundservice online</ h5 ></ div >

09 < div id = "emptySpace" ></ div >

10 < form id = "form1" action = "#" method = "#" >

11 < textarea id = "messageBox" name = "message" placeholder = "Your message" rows = "4" cols = "40" ></ textarea >

12 < button id = "sendButton" type = "submit" value = "Skicka" >Skicka</ button >

13 </ form >

14 </ div >

===================================================================================

JS

01 //////////////////////////////////////////////Function doesn'works//////////////////////////////////////////////////

02

03

04 function moveUp(){

05 var elem = document.getElementById( "supportField" );

06 document.getElementById( "hiddenField" ).style.display = "none" ;

07 var pos = 761;

08 var id = setInterval(frame, 1);

09 function frame() {

10 if (pos === 422) {

11 clearInterval(id);

12 } else {

13 pos--;

14 elem.style.top = pos + 'px' ;

15 document.getElementById( "supportField" ).style.display = "block" ;

16 document.getElementById( "hiddenField" ).style.display = "none"

17 console.log(pos);

18 }

19

20 }

21 return 0;

22 }

23

24

25 //////////////////////////////////////////////Function works//////////////////////////////////////////////////

26

27

28 function moveDown() {

29 var elem = document.getElementById( "supportField" );

30 var pos = 422;

31 var id = setInterval(frame, 1);

32 var id = setInterval(frame, 1);

33 var id = setInterval(frame, 1);

34 var id = setInterval(frame, 1);

35 function frame() {

36 if (pos === 761) {

37 clearInterval(id);

38 document.getElementById( "supportField" ).style.display = "none" ;

39 } else {

40 pos++;

41 elem.style.top = pos + 'px' ;

42 console.log(pos);

43 }

44 }

45 return 0;

46 }

======================================================================


#2

попробуй использовать более простой способ:
опиши состояния стилями CSS и потом меняй их js-ом
на пример так


#3

Спасибо огромное за помощь !)