CODEWITHSUNDEEP
javascriptjquerywordpressshow-hide
Atom Vayalinkal
Atom Vayalinkal

Reputation: 2692

jquery show/hide not working on wordpress

I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using <?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button> and #excerpt is filled using <?php the_content(); ?> .

content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.

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

Upvotes: 0

Views: 2052

Answers (3)

Gaurav Shah
Gaurav Shah

Reputation: 5279

You are loading two files that uses $ as alias ..

The following works:

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

But it would be better to look for the conflict issue and use jQuery.noConflict

Upvotes: 1

Siva Charan
Siva Charan

Reputation: 18064

Place this code at the end of Head tag.

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

Upvotes: 0

Nadir Muzaffar
Nadir Muzaffar

Reputation: 4842

It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:

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

Upvotes: 3

Related Questions