You need to put the label
element inside the .magic_button
element. Absolutely position it to fill the entire button, allowing you to click on it and thus toggle the checkbox.
label {
position:absolute;
left:0; right:0;
top:0; bottom:0;
}
That should take care of the main issue. If you want the button text to be hidden after the button is clicked, you will want to target it using the :checked
pseudo class and set the display to none
. Same goes for the paragraph.
Something like this will work:
#checkbox,
#checkbox:checked + .magic_button span,
.magic_button p {
display:none;
}
#checkbox:checked + .magic_button p {
display:block;
}
The reason your code wasn't working in the first place was because of the markup.
<label for="checkbox"><input id="checkbox" type="checkbox"/></label>
<div class="magic_button">...</div>
The selector, #checkbox:checked + .magic_button
, will select a .magic_button
element that is an adjacent, succeeding sibling of the checked element. Since the checkbox is a child of the label
element, it wasn't working. Making the input
/.magic_button
elements adjacent siblings allowing the element to be selected.
As an alternative to absolutely positioning the label
element, you could have also wrapped it around the .magic_button
element like this. Of course, that means you have to change some of the selectors too.