simple jQuery help
-
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?
- The topic ‘simple jQuery help’ is closed to new replies.