纯 CSS 幻灯片切换 - 切换：选中和答案之间的空间

Question

我已经通过其他帖子试图找到这个问题的答案，但无济于事。我正在尝试创建一个常见问题解答页面，其中包含一个带有隐藏答案的问题列表，当单击问题（即切换 + 标签）时会出现这些问题。

我已经成功创建了这个；

.message1{height:0px;font-size:0%;}

 #toggle:checked ~ .message1 {height:100px;font-size: 100%;}>

允许我在点击问题（切换）时召唤每个问题的答案。

我无法实现的是一种方法，可以在选择多个切换时阻止答案彼此的答案。 如果您测试下面的代码并单击 toggle1、toggle2 和 toggle3，您将看到问题。

欢迎提出任何建议，在此先感谢所有花时间在这方面的人。

下面是html：

 <input type="checkbox" name="toggle1" id="toggle1" />
 <label for="toggle1"><p class ="question">This is the first question</p></label>


<div class="message1">

    <p class = "answer">
     Answer text, Answer text, Answer text, Answer text, Answer text, Answer text, Answer text,
     Answer text, v Answer text, Answer text, Answer text, Answer text, Answer text, Answer text.
    </p>


</div>


 <input type="checkbox" name="toggle2" id="toggle2" />
 <label for="toggle2"><p class ="question">This is the second question</p></label>



<div class="message2">

    <p class = "answer">
     Answer text, Answer text, Answer text, Answer text, Answer text, Answer text, Answer text,
     Answer text, v Answer text, Answer text, Answer text, Answer text, Answer text, Answer text.
    </p>


</div>  


 <input type="checkbox" name="toggle3" id="toggle3" />
 <label for="toggle3"><p class ="question">This is the third question</p></label>



<div class="message3">

    <p class = "answer">
     Answer text, Answer text, Answer text, Answer text, Answer text, Answer text, Answer text,
     Answer text, v Answer text, Answer text, Answer text, Answer text, Answer text, Answer text.
    </p>


</div>  

还有css：

p.question{
 color: #0061b5;
 font-size: 200%;
 font-family:'Questrial',sans-serif;
 line-height: 2.0;
}

p.answer{
 color:#181818;
 font-size: 150%;
 font-family:'Questrial',sans-serif;
 line-height: 2.0;
 transition: color 0.05s ease-in;
}   


#toggle1,                       
#toggle2,
#toggle3{
 position:absolute;         
 appearance:none;           
 left:-100%;                
 top:-100%;                 
}

#toggle1 + label {              
 margin: 0% 0% 3% 3%;      
 width: 40em;              
 height: 5em;               
 position:absolute; 
 cursor:pointer;           
 border: 1px solid blue;     
}       

.message1 {
 margin: 3.5% 0% 0.5% 3%; 
 padding: 0%;            
 position: absolute;     
 width: 60%;              
 height: 0px;             
 transition: all 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 border: solid 0px #000000;
 font-size: 0%;
}

#toggle1:checked ~ .message1 {
 font-size: 100%;
 height: 100px;
 padding: 0.5%;
 border: 1px solid red;      
} 


#toggle1:checked ~ #toggle2 + label {top: 12%;}
#toggle1:checked ~ .message2 {top: 15%;}    
#toggle1:checked ~ #toggle3 + label{top:15%;}
#toggle1:checked ~ .message3 {top:21%;}



#toggle2 + label { 
 margin: 5% 0% 3% 3%;     
 width: 40em;            
 height: 5em;             
 position:absolute;    
 cursor:pointer;            
 transition: margin-top 100ms ease-in;
 border: 1px solid blue;     
}       

.message2 {
 margin: 9% 0% 0.5% 3%;  
 padding: 0%;            
 position: absolute;    
 width: 60%;            
 height: 0px;           
 transition: all 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
 border: solid 0px #000000;
 font-size: 0%;
}

#toggle2:checked ~ .message2 {
 font-size: 100%;
 height: 100px;
 padding: 0.5%;
 border: 1px solid red;      
}

#toggle2:checked ~ #toggle3 + label {top: 15%;}     
#toggle2:checked ~ .message3 {top: 15%;}        


#toggle3 + label {             
 margin: 10% 0% 3% 3%;     
 width: 40em;              
 height: 8em;              
 position:absolute;         
 cursor:pointer;            
 transition: margin-top 200ms ease-in;
 border: 1px solid blue; 
}       

.message3 {
 margin: 16% 0% 0.5% 3%;   
 padding: 0%;               
 position: absolute;     
 width: 60%;              
 height: 0px;               
 transition: all 600ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 
 border: solid 0px #000000;
 font-size: 0%;
}

#toggle3:checked ~ .message3 {
 font-size: 100%;
 height: 180px;
 padding: 0.5%;
 border: 1px solid red;      
}

Answer 1

像这样简单的东西对你有用。

.slider {
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

input {
  display: none;
}

input + label {
  padding: 3px;
  display: block;
  cursor: pointer;
  background-color: #ccf;
}

input + label + .slider {
  overflow: hidden;
  max-height: 0;
}

input:checked + label {
  background-color: #99f;
}

input:checked + label + .slider {
  overflow: hidden;
  max-height: 500px; /* approximate max height */
}

<input type="checkbox" id="toggle1" />
<label for="toggle1">Toggle 1</label>
<div class="slider">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
</div>
<input type="checkbox" id="toggle2" />
<label for="toggle2">Toggle 2</label>
<div class="slider">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
</div>

另一种带边框的变体：

.wrap {
  border: 1px solid #99f;
  margin: 0 0 10px;
}

.slider {
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

input {
  display: none;
}

input + label {
  padding: 3px;
  display: block;
  cursor: pointer;
  background-color: #ccf;
}

input + label + .slider {
  overflow: hidden;
  max-height: 0;
}

input:checked + label {
  background-color: #99f;
}

input:checked + label + .slider {
  overflow: hidden;
  max-height: 500px; /* approximate max height */
}

<div class="wrap">
  <input type="checkbox" id="toggle1" />
  <label for="toggle1">Toggle 1</label>
  <div class="slider">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
  </div>
</div>
<div class="wrap">
  <input type="checkbox" id="toggle2" />
  <label for="toggle2">Toggle 2</label>
  <div class="slider">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut corporis magni modi iure architecto dicta quas hic dolor, quaerat recusandae tempore facere natus sapiente debitis cupiditate vel, ratione laudantium accusamus!</p>
  </div>
</div>

注意：这不是最好的解决方案，但我的几分钱。 :)