jquery parent() button toggle and form expand

Question

I am attempting to toggle a button between two states, on click. The button will also open a contact form on the first click, once the form is completed the second click will close the form.

My JQ w/ .parent() (On click the form functions fine but there is no button transition from mail icon to close ('x') icon).

$("#popup_contact > a.button").click(function(e){
          e.preventDefault();
          $(this).parent().toggleClass('focus').toggleClass('active');
        });

My JQ - w/o .parent() (On click the button transitions from mail icon to close ('x') icon but the form does not expand into view).

 $("#popup_contact > a.button").click(function(e){
      e.preventDefault();
      $(this).toggleClass('focus').toggleClass('active');
    });

I am very new to Java/Jquery, so if more information is needed to understand the problem, please let me know.

Answer 1

I recommend you to enclose the form with a div+class to make it more easy to manage on jQuery, plus form height/width edit normally translates into errors.

I mean something like this:

<div class="form-wrapper">
  <div class="close-form"> X </div>
  <form>
  </form>
</div>

And the script looking something like this:

 $(".close-form").click(function(e){
   $(this).parent('.form-wrapper').toggleClass('focus').toggleClass('active');
 });

If you need more help I can answer your questions.