(Javascript/Wordpress) Show different content when checkbox is checked/unchecked

Question

I'm trying to show different divs with different tables(Wordpress shortcode) in them by checking and unchecking a checkbox on my Wordpress site. The code works fine on jsfiddle but on my website it doesn't happen anything when i use the checkbox. I want the div's to include different shortcodes. Maybe it has something to do with that?

Javascript:

$(document).ready(function() {

$("#overlay-1").change(function() {
$(".overlay-1").toggleClass("hide1337", this.unchecked)
$(".overlay-2").toggleClass("hide1338", this.unchecked)
}).change();

$("#overlay-1").change(function() {
$(".overlay-2").toggleClass("hide1337", this.unchecked)
$(".overlay-1").toggleClass("hide1338", this.unchecked)
}).change();


});

CSS

.hide1337 {
display: none;
}

.hide1338 {
display: show;
}

HTML

<div id="nav">
 <input type="checkbox" name="overlay-1" id="overlay-1">  Checkbox  
 <br/>
 </div>
<div class="overlay-1">
<br>shortcode2</div>
<div class="overlay-2">
<br>shortcode2</div>

http://jsfiddle.net/p6hFD/16/

Answer 1

No need for Javascript here. Go with pure CSS making use of pseudo selector :checked and sibling selector ~ :

 .overlay-1, .overlay-2 { display: none; } #overlay-1:not(:checked) ~ .overlay-1 { display: block; } #overlay-1:checked ~ .overlay-2 { display: block; } 

 <input type="checkbox" name="overlay-1" id="overlay-1"> Checkbox <div class="overlay-1"> <br>shortcode1</div> <div class="overlay-2"> <br>shortcode2</div> 

Note: For this to work the checkbox and the content containers that you want to hide/show must have the same parent element and the content containers must come after the checkbox.