WordPress.org

1. musnake
   Member
   Posted 3 years ago #

   Hello,

   I thought I'd try out some simple jQuery and ran into a wall...

   Help me out here, please! The example I chose was hiding a div.

   My theme already has a js folder, so I'll add my js for this e.g into a subfolder called hidediv...

   Files in play:

   theme/js/hidediv/animatedcollapse.js //The script from the link above which I wrapped in jQuery(document).ready(function(){...};
   theme/js/hidediv/divs2hide.js // see below:

   jQuery(document).ready(function(){
   	animatedcollapse.addDiv('postmetadiv','hide=1');
   	animatedcollapse.init();
   };

   theme/header.php has these two lines added to it:

   <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/hidediv/animatedcollapse.js"></script>
   <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/hidediv/divs2hide.js"></script>

   In my single.php file, I wrapped the area that I wanted to hide (holds the post metadata) in a div called "postmetadiv".
   Just above the postmetadiv div, I placed the image link I want to use to toggle the hide/unhide.

   <a href="javascript:animatedcollapse.toggle('postmetadiv');"><img src="/wp-content/uploads/icons/info.png" alt="Toggle Author and Post Information" width="32" height="32" border="0" /></img></a>
   <div id="postmetadiv">blah blah blah</div>

   No Joy! Apparently "animatedcollapse is not defined".
   Huh?

2. musnake
   Member
   Posted 3 years ago #

   So I managed to get this working by having the divs2hide.js load inline, in the body of the page, instead of before the page was supposedly loaded.

   This is helped.

   I think it's the CSS selector search/replace stuff I do with file/cat/topic icons + get gravatar etc that is messing this up.

   Anyway. Fixed.

Topic Closed

This topic has been closed to new replies.