Newbie jQuery toggle/hide/show on button click

Question

I am trying to write a function using jQuery, but my jQuery is not good at all. When the page loads there should be two fields Min Apt Price and Max Apt Price . When I click a button, those initial fields need to hide and I need Min Bed Price and Max Bed Price to display. I have gotten to the point where when the page loads the Min Apt Price and Max Apt Price will display and the other two remain hidden. When I click the button the Min Bed Price and Max Bed Price will display, but next to the original fields. Hope that makes sense.

HTML:

  $(document).ready(function() { $('.room-price').hide(); $('#price-switch').click(function() { $('.room-price').toggle(); $('.apt-price').hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="price-switch">Switch</button> <div class="row"> <div id="apt-price"> <div class="col-sm-2 min-max-price"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price"> </div> </div> <br class="visible-xs"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price"> </div> </div> </div> <div class="room-price"> <div class="col-sm-2 min-max-price"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price"> </div> </div> <br class="visible-xs"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price"> </div> </div> </div> </div> 

Answer 1

You have apt-price as an ID, not a class, so if you wanted to just toggle them, you'd do

 $(document).ready(function() { $('.room-price').hide(); $('#price-switch').click(function() { $('.room-price, #apt-price').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="price-switch">Switch</button> <div class="row"> <div id="apt-price"> <div class="col-sm-2 min-max-price"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price"> </div> </div> <br class="visible-xs"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price"> </div> </div> </div> <div class="room-price"> <div class="col-sm-2 min-max-price"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price"> </div> </div> <br class="visible-xs"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price"> </div> </div> </div> </div> 

Answer 2

Its Id=apr-price is not class so apply with $('#apt-price') .Apply both in single toggle its enough to switch

 $(document).ready(function() { $('.room-price').hide(); $('#price-switch').click(function() { $('.room-price ,#apt-price').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="price-switch">Switch</button> <div class="row"> <div id="apt-price"> <div class="col-sm-2 min-max-price"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price"> </div> </div> <br class="visible-xs"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price"> </div> </div> </div> <div class="room-price"> <div class="col-sm-2 min-max-price"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price"> </div> </div> <br class="visible-xs"> <div class="col-sm-2"> <div class="input-group"> <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price"> </div> </div> </div> </div>