Простой переход переключения Div с помощью jQuery

$(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>