Help: How can I make a spoiler with CSS ?

Question

I want to make a spoiler for my website, please help me do it

Answer 1

HTML:
<div class="spoiler">
<input type="checkbox" id="spoilerid_1">
<label for="spoilerid_1">Spoiler header</label>
<div class="spoiler_body">Hidden content</div>
</div>

CSS:
.spoiler > input + label:after{content: "+";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input:checked + label:after{content: "-";float: right;font-family: monospace;font-weight: bold;}
.spoiler > input{display:none;}
.spoiler > input + label , .spoiler > .spoiler_body{background:#CCC;padding:5px 15px;overflow:hidden;width:100%;box-sizing: border-box;display: block;}
.spoiler > input + label + .spoiler_body{display:none;}
.spoiler > input:checked + label + .spoiler_body{display: block;}
.spoiler > .spoiler_body{background: #FFF;border: 3px solid #CCC;border-top: none;}

Answer 2

Another question, can you give an explanation of the "+" and ">" selectors , please

Answer 3

div > p - Selects all <p> elements where the parent is a <div> element
div + p - Selects all <p> elements that are placed immediately after <div> elements

Answer 4

Can you define spoiler?

Answer 5

thanks you! it works perfect!