（Javascript/Wordpress）チェックボックスをオン/オフにしたときに異なるコンテンツを表示

Question

Wordpressのサイトでチェックボックスをオンまたはオフにして、異なるテーブル（Wordpressショートコード）で異なるdivを表示しようとしています。 コードはjsfiddleで正常に動作しますが、チェックボックスを使用しても私のWebサイトでは何も起こりません。私は、divに異なるshortcodesを含めることを望みます。多分それには関係がありますか？

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の必要はありません。擬似セレクタ:checkedと兄弟セレクタ~を利用して、純粋なCSSで行く

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

注： このチェックボックスと非表示にしたいコンテンツコンテナを動作するように/ショーを持っている必要がありますについて同じ親要素とコンテンツコンテナがチェックボックスの後に来なければなりません。