Toggle not working

Question

Hi, I have a set of div pairs (a 'header' and a 'body'). When the user clicks on the header, the next body section should show/hide (and update the +/- icon). All the divs are written to be "shown" on page load but I'd like to "close" some of them and the user can open them if they wish. Just can't get it to work! Code is below if anyone can help!

Sample section:

  <div class="expandingSection_head" id="expanderAI">
      <img class="imgExpand" src="../images/treeExpand_plus.gif" />
          Header text here
  </div>
  <div class="expandingSection_body">
      body text here
  </div>
  ...more pairs of divs like this on rest of page...

Code to toggle:

    $(".expandingSection_head").toggle(
    function() {
        $(this).css('background-color', '#6BA284');
        $(this).find('.imgExpand').attr('src', '../images/treeExpand_plus.gif');
        $(this).next(".expandingSection_body").slideUp(400);
    },
    function() {
        $(this).css('background-color', '#6BA284');
        $(this).find('.imgExpand').attr('src', '../images/treeExpand_minus.gif');
        $(this).next(".expandingSection_body").slideDown(400);
    });

    $("#expanderAI").toggle();

This last line doesn't "toggle" the specified div (i.e. "close" it). Anyone know why? Probably something simple.

Thanks!

Answer 1

It won't toggle just by specifying:

$("#expanderAI").toggle();

There should be some event behind it, example:

$('element').click(function(){
  $("#expanderAI").toggle();
});

Update:

Try this:

$('#expanderAI').click(function(){
  $(this).toggle();
});

Answer 2

the toggle function doesn't appear to have a use with no parameters:

http://api.jquery.com/toggle/

try using $('#elementID').click(); instead

Answer 3

upon re-reading the quesiton. i'd change this to a .click() then it should fire your toggle handler that were previously attached.

$("#expanderAI").click();

EDIT:

alright: i just wrote a test script: check it out:

<div id="ToggleMe">Toggle Me</div>
<div id="ChangeMe" style="background-color:Aqua;">Hello WOrld</div>
<script type="text/javascript">
 $(function () {
        $('#ToggleMe').toggle(
            function () {
                $('#ChangeMe').css('background-color', '#ff0000');

            },
            function () {
                $('#ChangeMe').css('background-color', '#000000');
            }

        );

        $('#ToggleMe').click();


    });
</script>

so, the div i'm changing SHOULD show as aqua, but on page load it's red. b/c the click() event is firing on the document ready.

so put your $('#ToggleMe').click(); in your document ready section after you attach the handlers and it really should work. the proof is right here!

Answer 4

Just tried a variation on these ideas :). So...

It doesn't work if I just change the last .toggle() to a .click()...but it DOES work if I make that change but call it AFTER the page has loaded. I think there's a timing issue here.

i.e. if I add a button:

and then do:

    $('#tmpbtntog').click(function() {
        $('#expanderAI').click();
    }
    );

then clicking the button toggles the div! However if I just replace the line

$("#expanderAI").toggle();

in my original code above with a .click() it does NOT work! Weird. Any ideas? Can you "delay" these things? I'm calling this in a document.ready, etc. so I don't think that's the prob.