Showhide CSS not working on WordPress

0 Views

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?

Read More

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>
Post Views: 0

Related posts

Leave a Reply

1 comment

  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.