Showhide CSS not working on Wordpress - html

Question

I've got this piece of CSS/HTML code that works good on jsfiddle and when I do a test.html on my browser but when I try to use it on a wordpress page (style in style.css and html on the page) just does not work.
I checked all the possibilities I could, there is no overwriting from the style, no browser problem... little help?
This is the test site:
http://manuscript.bugs3.com/
https://jsfiddle.net/1zeatcxp/
input#show, input#hide {
display:none;
}
div#paragraph {
display:none;
}
input#show:checked ~ div#paragraph {
display:block;
}
input#hide:checked ~ div#paragraph {
display:none;
}
.showthis {
float: left;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
text-align: center;
width: 80%;
}
.hidethis {
float: right;
background-color:#9b2f00;
border-style: solid black 1px;
color: #f2e07b;
padding: 5px;
box-shadow: 3px 3px 3px black;
<label for="show">
<div class="showthis">
<span>[Show]</span></div></label><input type=radio id="show" name="group"><label for="hide"><div class="hidethis"><span>[Hide]</span></div></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</span>

Answer 1

It looks like your HTML is being mangled by the wordpress editor, this is what I see on your page:
<div class="showthis">[Show]</div>
<p><input id="show" name="group" type="radio"><label for="hide"><br>
</label></p>
<div class="hidethis">[Hide]</div>
<p><label for="hide"></label><br>
<input id="hide" name="group" type="radio"></p>
<div id="paragraph">
<p>Content</p>
</div>
As you already discovered, remove_filter ('the_content', 'wpautop'); is the correct way to deal with this problem. You must make sure to place this in the functions.php file of your theme.
Edit:
Try it with the following HTML:
<label for="show"><span class="showthis">[Show]</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span class="hidethis">[Hide]</span></label>
<input type=radio id="hide" name="group">
<div id="paragraph">Content</div>
You should not be nesting block-level divs inside of label elements. It is not valid HTML, see https://stackoverflow.com/a/18609649/2126792.