CODEWITHSUNDEEP
jquerytoggle
jqwha
jqwha

Reputation: 1679

Toggle not working

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!

Upvotes: 8

Views: 17202

Answers (5)

Joakim &#214;stlund Andersson
Joakim &#214;stlund Andersson

Reputation: 11

This is a confusing one

There's two versions of toggle.

Toggle1 - http://api.jquery.com/toggle-event/

Toggle2 - http://api.jquery.com/toggle/#toggle2

It seems that if you're in an event context, Toggle1 will be called. E.g. inside a click function.

If you're just doing toggle() outside of an event function Toggle2 will be called. If you want to toggle with this one you'll have to pass in true/false. True to show, false to hide. Or just pass in durations and animation-types etc... Just check the API :)

Upvotes: 1

Patricia
Patricia

Reputation: 7802

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!

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382881

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();
});

Upvotes: 6

jqwha
jqwha

Reputation: 1679

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.

Upvotes: 0

Scott M.
Scott M.

Reputation: 7347

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

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

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

Upvotes: 1

Related Questions