Ease Transition of Toggling Div with jQuery

Question

I'm trying to establish a smooth transition when toggling a div. Right now the toggle is immediate.

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").toggle();
   })
});

.description-container {
  font-family: "Proxima Nova Regular";
}

.form-div-outer {
  margin: 10px 0;
}

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  border-bottom: none;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

/*initial display*/

.form-div-top {
  display: none;
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="description-container">
          Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
  <div class="product-suggestion-form-container">
    <span class="form-title">Product Suggestion Form</span>
    <span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
    </span>
  </div>
  <div class="form-div-top">
    <form class="form-div-inner-top">
      <span class="input-group input-group-name">
        <input type="text" placeholder="Name" class="form-input" required>           </input>
      </span>
      <span class="input-group input-group-email-address">
        <input type="text" placeholder="Email Address" class="form-input" required></input>
      </span>
      <span class="input-group description-of-product-desired">
        <input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
      </span>
    </form>
  </div>
</div>

I've tried to add .animate() and .fadeIn() but neither are working. Is my syntax wrong? Is the way I'm calling them wrong? Transition is still immediate.

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").toggle()
      $(".form-div-top").animate({
       duration: 200
      });
      $(".form-div-top").fadeIn( "slow", function() {
       // Animation complete
      });
   })
});

Answer 1

On my own I can suggest a solution using the toggleClass() method:

...
$(".form-div-top").toggleClass("form-div-top_show");
...

It is necessary to create an additional class for the block activity:

.form-div-top_show {
  opacity: 1;
}

And also, you need to add a transition rule for the smooth appearance of the block, and replace display: none with opacity: 0:

.form-div-top {
  opacity: 0;
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
  transition: .5s;
}

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").toggleClass("form-div-top_show");
   })
});

.description-container {
  font-family: "Proxima Nova Regular";
}

.form-div-outer {
  margin: 10px 0;
}

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  border-bottom: none;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

/*initial display*/

.form-div-top {
  opacity: 0;
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
  transition: .5s;
}

.form-div-top_show {
  opacity: 1;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="description-container">
          Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
  <div class="product-suggestion-form-container">
    <span class="form-title">Product Suggestion Form</span>
    <span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
    </span>
  </div>
  <div class="form-div-top">
    <form class="form-div-inner-top">
      <span class="input-group input-group-name">
        <input type="text" placeholder="Name" class="form-input" required>           </input>
      </span>
      <span class="input-group input-group-email-address">
        <input type="text" placeholder="Email Address" class="form-input" required></input>
      </span>
      <span class="input-group description-of-product-desired">
        <input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
      </span>
    </form>
  </div>
</div>

Answer 2

jQuery's toggle method accepts a duration in milliseconds as the first argument.

$(".form-div-top").toggle(300);

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").toggle(300);
   })
});

.description-container {
  font-family: "Proxima Nova Regular";
}

.form-div-outer {
  margin: 10px 0;
}

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  border-bottom: none;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

/*initial display*/

.form-div-top {
  display: none;
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="description-container">
          Fill out the product suggestion and contact us forms below:
</div>
<div class="form-div-outer">
  <div class="product-suggestion-form-container">
    <span class="form-title">Product Suggestion Form</span>
    <span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
    </span>
  </div>
  <div class="form-div-top">
    <form class="form-div-inner-top">
      <span class="input-group input-group-name">
        <input type="text" placeholder="Name" class="form-input" required>           </input>
      </span>
      <span class="input-group input-group-email-address">
        <input type="text" placeholder="Email Address" class="form-input" required></input>
      </span>
      <span class="input-group description-of-product-desired">
        <input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
      </span>
    </form>
  </div>
</div>