Сворачивается окно чата после отправки сообщения

29 сентября 2021, 07:40

function openForm() { 
  document.getElementById("myForm").style.display = "block"; 
} 
 
function closeForm() { 
  document.getElementById("myForm").style.display = "none"; 
}

body {font-family: Arial, Helvetica, sans-serif;} 
* {box-sizing: border-box;} 
 
/* Button used to open the chat form - fixed at the bottom of the page */ 
.open-button { 
  background-color: #555; 
  color: white; 
  padding: 16px 20px; 
  border: none; 
  cursor: pointer; 
  opacity: 0.8; 
  position: fixed; 
  bottom: 23px; 
  right: 28px; 
  width: 280px; 
} 
 
/* The popup chat - hidden by default */ 
.chat-popup { 
  display: none; 
  position: fixed; 
  bottom: 0; 
  right: 15px; 
  border: 3px solid #f1f1f1; 
  z-index: 9; 
} 
 
/* Add styles to the form container */ 
.form-container { 
  max-width: 300px; 
  padding: 10px; 
  background-color: white; 
} 
 
/* Full-width textarea */ 
.form-container textarea { 
  width: 100%; 
  padding: 15px; 
  margin: 5px 0 22px 0; 
  border: none; 
  background: #f1f1f1; 
  resize: none; 
  min-height: 200px; 
} 
 
/* When the textarea gets focus, do something */ 
.form-container textarea:focus { 
  background-color: #ddd; 
  outline: none; 
} 
 
/* Set a style for the submit/send button */ 
.form-container .btn { 
  background-color: #4CAF50; 
  color: white; 
  padding: 16px 20px; 
  border: none; 
  cursor: pointer; 
  width: 100%; 
  margin-bottom:10px; 
  opacity: 0.8; 
} 
 
/* Add a red background color to the cancel button */ 
.form-container .cancel { 
  background-color: red; 
} 
 
/* Add some hover effects to buttons */ 
.form-container .btn:hover, .open-button:hover { 
  opacity: 1; 
}

<body> 
 
 
<button class="open-button" onclick="openForm()">Chat</button> 
 
<div class="chat-popup" id="myForm"> 
  <form action="/chat" method="post" style="margin-left: 10px;margin-top: 100px" class="form-container">{% csrf_token %} 
    <h1>Chat</h1> 
 
    <label for="your_name"><b>Message</b></label> 
      <p style="margin-left: 10px">{{ name }}</p> 
    <textarea placeholder="Type message.." name="your_name" required id="your_name" type="text"></textarea> 
    <button type="submit" class="btn" >Send</button> 
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button> 
  </form> 
</div> 
 
 
 
</body> 
</html>

Нужно чтобы чат не сворачивался пока не нажмут кнопку "Close" Если убрать

display: none;

то чат не сворачивается но сразу развёрнут при переходе на страницу,а мне надо чтобы он был свёрнут,и открыт когда на него нажмут. Я вижу одно решение убрать display: none; и добавить скрипт который сворачивает чат при переходе на страницу(так чтобы юзер это не заметил) подскажите как это реализовать на JS или подскажите своё решение этой проблемы. Спасибо!