使用 jQuery 显示/隐藏 Div

Question

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 1

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();
 });
});