(Javascript/Wordpress) Показать другой контент, когда флажок установлен/снят флажок

Question

Я пытаюсь показать в нем разные div с разными таблицами (Wordpress shortcode), установив и сняв флажок на моем сайте Wordpress. Код отлично работает на jsfiddle, но на моем веб-сайте ничего не происходит, когда я использую этот флажок. Я хочу, чтобы div включал разные короткие коды. Может быть, это как-то связано с этим?

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

Нет необходимости Javascript здесь. Переход с чистого использования CSS решений селектора псевдо :checked и селектор родственного ~:

.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>

Примечание: Для этого, чтобы работать флажок и контейнеры содержимого, которые вы хотите скрыть/показать, должны иметь тот же родительский элемент и контейнеры содержимого должны появиться после этого флажка.