jQuery toggle won't work for checkbox, div remains display:block

I have an input checkbox field and when the checkbox changes (user clicks or unclicks) the div below should toggle. In my style sheet I have the div paypalInputArea as display:none and when the checkbox in clicked, it should toggle, however I can't seem to get it to work. Can anyone see what is wrong with my code?

Here is my html:

<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div> 

<div class="paypalInputArea">
    <isinclude template="includes/paymentmethodsinclude" /> 
</div>

And here is my jQuery:

 $("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
                $(".paypalInputArea").toggle();
                if ($('.paypalInputArea').is(':visible')) {
                    app.paymentAndReview.setCOContinueBtn(true);
                    $("#paypalPaymentCheckbox").attr('checked','true');
                    $('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
                } else {
                    $("#paypalPaymentCheckbox").removeAttr('checked');
                    $('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
                    app.paymentAndReview.setCOContinueBtn(false);
                }
            });
            $("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);