Streamline/Improve Use of jQuery for Conditional Validation & Form Visibility

This project requires a thorough understanding of the following scripts: * jQuery Validate * jQuery Masked Input * Conditional form field validation Technical Issue # 1: (a) The attached file consists of a responsive landing page containing two sets of form fields. (b) The first set of form fields are always visible and require completion. (c) The second set of form fields are conditionally visible, but only if someone clicks on a button. The problem is that I was trying to leverage css to make a checkbox, which is how the script responsible for handling both conditional visibility and validation is written. This script can be found in the following section: "START CONDITIONAL VISIBILITY OF FIELDS BASED ON INTEREST IN PROVIDING A REFERRAL". This script is associated with the code found below the "ck-button" section. Essentially, I want true button which toggles visibility of the second set of fields. This functionality must also link to conditional validation already mentioned. If someone clicks on the button the first time the fields are visible and jQuery validate and masking is invoked (true); however, if they click on the button again, the second set of fields disappear and validation/masking is not applied (false). Technical Issue # 2: (a) The second set of fields contains a phone number. Because I don't understand how to apply both jQuery validation and field masking to two different phone numbers contained in the same form, I am using two separate scripts to provide this functionality. Essentially, I want both the "keyup" function and "keypress" function replaced with true/native jQuery validate and jQuery field masking. Technical Issue # 3: (a) Implementation of accordian-like functionality. Essentially, I would like the second set of form fields expand and collapse similarly to the following example: [login to view URL]