CSS Only Multiple onclick events - html

Question

This is generally a hack which i am trying to figure out in css, From what I can gather it should be working in theory and it isn't.
#expand {
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0);
}
#btn {
display: none;
}
#btn:checked+label:before {
transform: rotate(90deg);
}
#btn:checked+label:after {
transform: rotate(180deg);
}
#btn:checked+.button:before {
display: none;
}
#btn:checked+.button:after {
display: inline-block;
}
.button {
position: relative;
width: 25px;
height: 25px;
display: inline-block;
}
.button:before,
.button:after {
content: "";
position: absolute;
background-color: black;
transition: transform 0.35s ease-out;
}
/* Vert Line */
.button:before {
top: 0;
left: 46%;
width: 4px;
height: 100%;
margin-left: 2px;
margin-top: 2px;
}
/* Horiz Line */
.button:after {
top: 50%;
left: 0;
width: 100%;
height: 4px;
margin-left: 2px;
}
.inform {
display: none;
}
<div id="expand">
<input id="btn" type="checkbox">
<label class="button" for="btn"></label>
<div class="inform">
<h3>Heading</h3>
<p>Alot of content.</p>
</div>
So as you can see, I have the "hack" for the click event on changing the style for .button using a checkbox.
I then used the + selector to target the div .inform.
If i am correct the + selector means it targets the immediate following element, In which case this should work. But it does not, Could someone possibly help clear my understanding of this and if i am wrong, otherwise could you help point me in the right direction to get this to work.
Summary:
I would like to get the header and paragraph to display when the checkbox is checked, aswell as getting the + symbol to rotate.

Answer 1

You've got similar selectors:
#btn:checked+.button:before {
display: none;
}
#btn:checked+.button:before {
display: inline-block;
}
And #btn:checked+label:before and #btn:checked+.button:before are the same thing.
I think it should look like:
#expand {
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0);
}
#btn {
display: none;
}
#btn:checked+label:before {
transform: rotate(90deg);
}
#btn:checked+label:after {
transform: rotate(180deg);
}
#btn:checked+.button:before {
display: none;
}
#btn:checked ~ .inform {
opacity: 1;
}
.button {
position: relative;
width: 25px;
height: 25px;
display: inline-block;
}
.button:before,
.button:after {
content: "";
position: absolute;
background-color: black;
transition: transform 0.35s ease-out;
}
/* Vert Line */
.button:before {
top: 0;
left: 46%;
width: 4px;
height: 100%;
margin-left: 2px;
margin-top: 2px;
}
/* Horiz Line */
.button:after {
top: 50%;
left: 0;
width: 100%;
height: 4px;
margin-left: 2px;
}
.inform {
display: inline-block;
opacity: 0;
transition: all .5s ease;
}
<div id="expand">
<input id="btn" type="checkbox">
<label class="button" for="btn"></label>
<div class="inform">
<h3>Heading</h3>
<p>Alot of content.</p>
</div>