How to make a spoiler close when another is opened?

L

Lakalut222021-03-31 23:14:33

HTML

Lakalut22, 2021-03-31 23:14:33

On the Internet, I found a code for a spoiler, finished it a little and got a few spoilers, but due to the fact that there are a lot of answers in them, they climb out of the block, which prevents how you can convert the code so that only one spoiler opens (opening the other, the first closed)

<!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:[email protected];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>

Z.Y. Yes, I had to use the outdated Font because only html code is shoved on the constructor. :(

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

DivineDraft, 2021-04-01
@DivineDraft

jQuery Solution