Как сделать закрытие спойлера при открытии другого?

Question

Lakalut22 @Lakalut22

HTML
Wix

Как сделать закрытие спойлера при открытии другого?

На просторах интернета нашел код на спойлер, немного его допилил и получилось несколько спойлеров, но за счет того, что ответов в них много, они лезут из блока, что мешает, как можно преобразовать код, чтобы открывался только один спойлер(открывая другой, первый закрывался)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
	<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
  <title>Спойлер</title>
  <style>
   .spoiler input, .spoiler div  { 
    display: none; 
   }
   .spoiler label::before {
    content: '+' ; 
    margin-right: 5px;
	font-size: 30px
   }
  
   .spoiler :checked + label::before { content: '×'; }
   .spoiler :checked ~ div {
    display: block;
    padding: 15px;
   }
	hr {
    border: none; 
    color: black; 
    background-color: black; 
    height: 2px; 
   }
  </style>
 </head> 
 <body>
  <div class="spoiler">
   <input type="checkbox" id="spoiler1">
   <label for="spoiler1"><font size="5"  face='Open Sans'> Вопрос 1</font> </label>
   <div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
    <hr> 
</div>
   
 <div class="spoiler">
   
   <input type="checkbox" id="spoiler2">
   <label for="spoiler2"><font size="5"  face='Open Sans'> Вопрос 2</font> </label>
   	<div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
 <div class="spoiler">
   <input type="checkbox" id="spoiler3">
   <label for="spoiler3"><font size="5"  face='Open Sans'> Вопрос 3</font> </label>
   <div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
 <div class="spoiler">
   <input type="checkbox" id="spoiler4">
   <label for="spoiler4"><font size="5"  face='Open Sans'> Вопрос 4</font> </label>
   <div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
<div class="spoiler">
   <input type="checkbox" id="spoiler5">
   <label for="spoiler5"><font size="5"  face='Open Sans'> Вопрос 5</font> </label>
   <div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
<div class="spoiler">
   <input type="checkbox" id="spoiler6">
   <label for="spoiler6"><font size="5"  face='Open Sans'> Вопрос 6</font> </label>
   <div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
<div class="spoiler">
   <input type="checkbox" id="spoiler7">
   <label for="spoiler7"><font size="5"  face='Open Sans'> вопрос 7</font> </label>
   <div><font size="5"  face="Open Sans">Выпадающий ответ</font></div>
	<hr>
 </div>
 </body> 
</html>

З.Ы. Да мне пришлось использовать устаревший Font потому что на конструкторе только html код пихается. :(