Individual CSS spoiler without javascript - css

Question

A website use this spoiler code:
https://codepen.io/oloman/pen/odnqy
input[id^="spoiler"] {
display: none;
}
input[id^="spoiler"]+label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: #e1a;
color: #fff;
text-align: center;
font-size: 24px;
border-radius: 8px;
cursor: pointer;
transition: all .6s;
}
input[id^="spoiler"]:checked+label {
color: #333;
background: #ccc;
}
input[id^="spoiler"]~.spoiler {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
padding: 10px;
background: #eee;
border: 1px solid #000;
border-radius: 8px;
transition: all .6s;
}
input[id^="spoiler"]:checked+label+.spoiler {
height: auto;
opacity: 1;
padding: 10px;
}
<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler1</label>
<div class="spoiler">
Lorem ipsum dolor sit amet, Etiam congue, neque a commodo
</div>
<input type="checkbox" id="spoiler" />
<label for="spoiler">Spoiler1</label>
<div class="spoiler">
Lorem ipsum dolor sit amet, Etiam congue, neque a commodo
</div>
This works, when only 1 spoiler is visible. If multiple spoilers are available, only the first one is working (opening), when someone click at the next buttons.
Is there a way to make this individual without javascript and only with css, maybe with hasChild? Its not possible to use different ID´s.
I made a jsFiddle:
https://jsfiddle.net/swj38nmr/

Answer 1

We can achieve this effect -without javascript- using the html element details and a css keyframe:
Simplest example:
details[open] summary ~ * {
animation: spoiler 1s ease-in-out;
padding: 2rem;
background: pink;
border-radius: 1rem
}
#keyframes spoiler {
0% {opacity: 0; background: red; border-radius: 3rem}
100% {opacity: 1; background: pink; border-radius: 1rem}
}
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
<details>
<summary>
Spoiler
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat.
</p>
</details>
Behave well on mobile.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details