Pure CSS Slide Toggle - space between toggle:checked & answers

Question

I've been through other posts to try to find an answer to this to no avail. I'm trying to create a FAQ page with a list of questions with hidden answers that appear when the question ie toggle + label is clicked.

I've successfully created this using;

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

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

Allowing me to summon the answer to each question when the question(toggle) is clicked.

What I cannot achieve is a way to stop the answers from running into one another when multiple toggle are selected. If you test the code below and click on both toggle1, toggle2 & toggle3 you will see the problem.

Any suggestions are welcome, thanks in advance to anyone who spends time on this.

Below is the 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>  

And the 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

Something as simple like this will work for you.

 .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> 

Another variant with borders:

 .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> 

Note: This couldn't be the best solution, but my few cents. :)