jQuery addClass example

Change class name on click in jQuery

by Jed Lynch

HTML

<html>



<div>
	<h2>Weddings</h2>
	<p>
		Imagine the Wedding of your dreams filled with all the Special Touches. Imagine being surrounded by loving family and friends in a private setting among the rolling hills and vineyards of the Cayuga and Seneca Finger Lakes Wine Trail in upstate New York.
	</p>
	<p>
		Intimate Weddings (50 guests max) are our Specialty. Its all here but the dress & the groom. Flowers, ceremony, Justice O' Peace, witnesses, reception, tent, table, linens, chairs, rental props, china, flatware, stemware, food, cake, decorations, guest rooms, bridal suite, honeymoon, music, & limousine.
	</p>

	<p>
		Taste the Artistry of our Chefs and kitchen staff. We cater to your needs, budget, theme, dietary requirements, or favorites. These are our sample menus & pricing but we specialize in custom designing a menu to make a memorable meal that reflects your personality. We do only buffet style food service on site. 
	</p>
	<p>
		<strong>We do allow outside licensed Caterers on the premises.</strong>
	</p>
	<p>
		Share your vision. Let us know your thoughts and we will work with you to bring Life to your Dreams.
	</p>
	<br><strong>* All Packages do not include alcohol, site rental and rentals.</strong>  

	<h3>Package I: Cocktail Reception (3 hours) <strong>$15.00 per person*</strong></h3>
	<div>
		Cocktail Hour:
		<ul>
			<li>Fresh Fruit with local and international cheeses artistically arranged with a variety of seasonal vegetables served with a refreshing cucumber yogurt dip </li>
			<li>Passed Hor d’ oeuvres (a choice of 6) from our extensive list of homemade hor d’oeuvres</li>
		</ul>
	</div>
	<div>
		Wedding Cake:
		<ul>
			<li>Your choice of cake, filling, icing and decorations</li>
		</ul>
	</div>
	<div>
		Coffee, tea, and soda.
	</div>
	<br><strong>Plus Tax & Gratuity</strong>  


	<h3>Package II: Light Reception (4 hours) <strong>$21.00 per person*</strong></h3>
	<div>
		Cocktail Hour:
		<ul>
			<li>Fresh Fruit with local and international...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})