Showing / Hiding Div With jQuery

I’m using toggle() but it’s not working. My script is in the footer:

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

or I’ve also tried addClass():

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

Basically I’m just trying to toggle between showing and hiding the form divs.

When product-suggestion-form-container is clicked on, form-div-top should show.

When contact-us-form-container is clicked on, form-div-bottom should show.

Then they should hide when those divs are clicked on again.

Shouldn’t clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing’s happening.

I was just getting the jQuery from here, but ideally I’d like to add a smooth transition and whatever other best practices you might suggest for doing this.

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

.form-div-outer {
  margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
}

/*initial display*/

.form-div-inner-top {
  display: none;
}

.form-div-inner-bottom {
  display: none;
}

.form-div-inner-top:active {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.form-div-inner-bottom:active {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.form-input {
  margin: 10px 0;
  padding: 5px;
  border: none;
  background-color: #ffffff;
  width: 100%;
}

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

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

<div class="form-div-outer">
  <div class="contact-us-form-container">
    <span class="form-title">Contact Us Form</span>
    <span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
    </span>
    </div>
    <div class="form-div-bottom">
    <form class="form-div-inner-bottom">
      <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 input-group-contact-reason">
      <div class="contact-reason-container">
        <ul class="radiolist">
          <li>
            <input class="radio" type="radio"><label>Order question</label>
            <input class="radio" type="radio"><label>Website feedback</label>
            <input class="radio" type="radio"><label>Trouble finding product</label>
          </li>
        </ul>
      </div>
     </span>
    </form>
  </div>
</div>

Answer

It seems you have forgot .s in your code to access the data.

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

Advertisement

Answer