jQuery addClass example

Change class name on click in jQuery

HTML

<div class="my-container">
<div id="banner-message">
  <p>
  1
  </p>
</div>
<div id="banner-message">
  <p>
  2a
  </p><p>
  2b
  </p>
</div>
<div id="banner-message">
  <p>
  3
  </p>
</div>
</div>

CSS

.my-container
{
  padding:10px;
  border:1px solid green;
  background-color:#fff;
}
p
{
  background-color:#fff;
  color:#000;
  font-size:1rem;
  margin-bottom:10px;
  margin-top:0;
  margin-left:0;
  margin-right:0;
}

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

JavaScript

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

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