jQuery addClass example

Change class name on click in jQuery

by Ryan Brackett

HTML

<h3>What kind of visit did you have with us?</h3>
<p>
  <select id="visit-type">
    <option>Please choose:</option>
    <option value="primary-care">Primary Care</option>
    <option value="urgent-care">Urgent Care</option>
    <option value="specialty-care">Other Specialty Care</option>
  </select>
</p>
<div class="location-sets">
  <div class="location-set primary-care">
    <h3>Which Primary Care location did you visit?</h3>
    <ul>
      <li>
		  <h3>NGPG Gateway Exchange</h3>
		  <div class="address">426 Exchange Blvd Suite 600, Bethlehem, GA 30620</div>
       <a href="https://www.google.com/search?q=ngpg+gateway+exchange&amp;rlz=1C1GGRV_enUS794US794&amp;oq=NGPG+Gateway+Exchange&amp;aqs=chrome.0.0l2.616j0j7&amp;sourceid=chrome&amp;ie=UTF-8#lrd=0x88f5dce7757f6eb9:0xec62a9692a3038dd,3,,," target="_blank">Review</a>
        </li>
      <li>
      		  <h3>NGPG Dawsonville</h3>
		  <div class="address">08 Prominence Ct Suite 200, Dawsonville, GA</div> 
       
       <a href="https://www.google.com/search?q=ngpg+dawsonville&amp;rlz=1C1GGRV_enUS794US794&amp;oq=ngpg+daw&amp;aqs=chrome.0.0j69i57j0l2j69i61l2.1599j0j4&amp;sourceid=chrome&amp;ie=UTF-8#lrd=0x885f620bf8f11acb:0x5bfc03fab20b8770,3,,," target="_blank">Review</a>
        </li>
      <li>
       	  <h3>NGPG Dahlonega</h3>
		  <div class="address">95 Morrison Moore Parkway, Dahlonega, GA 30533</div>       
       
       <a href="https://www.google.com/search?q=ngpg+dahlonega&amp;rlz=1C1GGRV_enUS794US794&amp;oq=NGPG+Dahlonega&amp;aqs=chrome.0.0l3j69i60l3.655j0j9&amp;sourceid=chrome&amp;ie=UTF-8#lrd=0x885f662db8877be3:0xc56faf30b8d3237d,3,,," target="_blank">Review</a>
        </li>
      <li>
    <h3>NGPG Wauka Mountain</h3>
		  <div class="address">5281 Cleveland Hwy, Clermont, GA</div>
           <a...

CSS

.location-set {
  display: none;
}

.location-set.active {
  display: block;
}

JavaScript

$( document ).ready(function() {
    $('select#visit-type').on('change', function() {

  var location_set = this.value;

  $('.location-set').removeClass('active');
  $('.' + location_set).toggleClass('active');

});
});