jqueryの表示/非表示はワードプレスでは機能しません

Question

私はhttp://trueproperty.org/で作業していますが、フロントページには2つのdivがあり、いずれも#excerpt、もう1つは#contentです。 #contentは <?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button> を使用して入力し、#excerptは <?php the_content(); ?>を使用して入力します。

コンテンツはdisplay:noneに設定されています。今私はこのコードを使用して#contentを表示し、ユーザーがクリックを読むと#excerptを非表示にします。jsbinで動作しますが、actual siteでは動作しません。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#readmore").click(function(){ 
      $('#content').show('slow'); 
     $('#excerpt').hide('fast'); 
}); 
}); 
      </script> 

Answer 1

..

次作品：

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
jQuery("#readmore").click(function(){ 
     jQuery('#content').show('slow'); 
    jQuery('#excerpt').hide('fast'); 
}); 
}); 
     </script> 

しかし、競合の問題を探し、使用する方が良いでしょうjQuery.noConflict

Answer 2

実際にjQueryオブジェクトを使用する前に、Jqueryライブラリを参照しているようではありません。コードの後に​​配置してください：

<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' /> 

Answer 3

このコードをHeadタグの末尾に置きます。あなたは別名として$使用する2つのファイルをロードしている

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#readmore").click(function(){ 
    $('#content').show('slow'); 
    $('#excerpt').hide('fast'); 
    }); 
}); 
</script>