• 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?

Viewing 1 replies (of 1 total)
  • Thread Starter WebDev WaxLotus LLC

    (@musnake)

    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.

Viewing 1 replies (of 1 total)
  • The topic ‘simple jQuery help’ is closed to new replies.