jQuery addClass example

Change class name on click in jQuery

by Suryar Praveen

HTML

<div class="offer-section-offer-detail">
  <div class="offer-detail-page-template lycaemailaccount et_pb_row et_pb_row_0">


    <div class="et_pb_column et_pb_column_1_3 mr-0 et_pb_column_0">


      <div class="et_pb_module et-waypoint et_pb_image et_pb_animation_left offer-detail-image-left et_pb_image_0 et_always_center_on_mobile et-animated">
        <img src="https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2017/05/05111748/email-account.jpg" data-lazy-src="https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2017/05/05111748/email-account.jpg" alt="" class="lazyloaded" data-was-processed="true"><noscript><img src="https://s3-eu-west-2.amazonaws.com/lycamobileukwebsite/lycauk/dev/lycamobile-uk-cms/wp-content/uploads/2017/05/05111748/email-account.jpg" alt="" /></noscript>

      </div>
    </div> <!-- .et_pb_column -->
    <div class="et_pb_column et_pb_column_2_3  et_pb_column_1">


      <div class="et_pb_code et_pb_module regs-activate-two et_pb_code_0">
        <form id="otpValidate" novalidate="novalidate">
          <div class="col-md-12 col-xs-12 lycaEmailAcct">
            <div>
              <div class="col-md-12  col-xs-12 fraud-warning-common-for-all">
                <input id="lycaEmail" placeholder="Email ID*" name="lycaEmail" type="email" required="" data-rule-email="true" autocomplete="off" aria-required="true" class="fraud-warning-selectise-for-drop-down" emailpatterncustom="[^@]+@[^@]+\.[a-zA-Z]{2,6}" email="true">
                <input id="lycaValidate" value="VALIDATE" class="et_pb_button pull-right lycaValidate" type="button" onclick="lycaValid()" aria-invalid="false">
              </div>

              <div class="col-md-12  col-xs-12 fraud-warning-common-for-all">
                <div class="col-md-1 fraud-warning-common-for-all mt-10">
                  <label>OTP</label>
                </div>
                <div...

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")
})