fadeIn/fadeOut iframe on click

Question

The way this works is once I click div with the class 'signupbutton' a iframe fades in. That part works fine. What I'm having trouble with is trying to figure out how I can fade out the iframe once I click that same div again with the class 'signupbutton'. Any suggestions?

<div class="signupbutton_container">
    <div class="signupbutton" style="background-image:url('http://placehold.it/350x150')" onclick="showForm('dGFKTUJrUDdHQkEyeTVMaDhCODFnemc6MA')">&nbsp;</div>
</div>

function showForm(formkey) {
    $("iframe").remove();
    $(".section-lights").append("<iframe class='contactframe' src='https://docs.google.com/spreadsheet/embeddedform?formkey="+formkey+"' height='999' frameborder='no' width='100%' height='1847' style='height:2952px; display:none;'>");
    $("iframe").fadeIn();
}

Answer 1

Try to use fadeToggle():

function showForm(formkey) {
    $(".section-lights").append("<iframe class='contactframe' src='https://docs.google.com/spreadsheet/embeddedform?formkey="+formkey+"' height='999' frameborder='no' width='100%' height='1847' style='height:2952px; display:none;'>");
    $("iframe").fadeToggle();
}

Answer 2

function showForm(formkey) {
    if($("iframe").length == 0){
        //add iframe
        $(".section-lights").append("<iframe class='contactframe' src='https://docs.google.com/spreadsheet/embeddedform?formkey="+formkey+"' height='999' frameborder='no' width='100%' height='1847' style='height:2952px; display:none;'>");
    }
    $("iframe").fadeToggle();
}