Jquery toggle with two elements

I am using a toggle on a graphic to slide out a contact form. The problem is, the contact form can cover up the graphic element on low resolutions. I thought a solution would be to include a "close this" inside the form, that would use the same toggle effect. When I add the close this element to the code, instead of working in tandem with the original graphic element, it starts the chain back over, and slides the contact form even further out.

Site is here: http://www.tritonloyaltysupport.com/status

Code for toggle here:

$(this).html(div_form); 
//show / hide function 

$('div.contactable').toggle( 
    function() { 
       开发者_如何学编程 $('#overlay').css({display: 'block'}); 
        $('#contactForm').animate({"marginRight": "-=0px"}, "fast");
        $('#contactForm').animate({"marginRight": "+=390px"}, "slow");
    }, 
    function() {
        $('#contactForm').animate({"marginRight": "-=390px"}, "slow");  
        $('#overlay').css({display: 'none'}); 
    }
);

You might try setting your two toggle actions as functions outside your $().toggle(); and then bind the hide function to the new panel.

function show() {
        $('#overlay').css({display: 'block'}); 
        $('#contactForm').animate({"marginRight": "-=0px"}, "fast");
        $('#contactForm').animate({"marginRight": "+=390px"}, "slow");
}

function hide() {
        $('#contactForm').animate({"marginRight": "-=390px"}, "slow");  
        $('#overlay').css({display: 'none'}); 
}

$('div.contactable').toggle(show, hide);

$('button .close', '#contactForm').click(hide);

Obviously you'll have you change that last line to target your close button, but that should get you started.

I ended up reusing a previous piece of code for a slide panel, and repurposed it. Code follows for those interested:

    $(this).html(div_form);
        $("div.contactable").click( function() {
            if ($("#openCloseIdentifier").is(":hidden")) {
                $("#contactForm").animate({ 
                    marginRight: "0px"
                    }, 500 );
                $("#openCloseIdentifier").show();
            } else {
                $("#contactForm").animate({ 
                    marginRight: "-390px"
                    }, 500 );
                $("#openCloseIdentifier").hide();
            }
        });