Person

Toggle class name on click in jQuery

by merganser

HTML

<link rel="stylesheet" href="http://getskeleton.com/dist/css/normalize.css">
  <link rel="stylesheet" href="http://getskeleton.com/dist/css/skeleton.css">

<div class="container">

<form>
  <div class="row">
    <div class="six columns">
      <label for="Email">Email</label>
      <input class="u-full-width" type="email" placeholder="[email protected]" id="Email">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
  <label class="example-send-yourself-copy">
    <input type="checkbox">
    <span class="label-body">Send a copy to yourself</span>
  </label>
  <input class="button-primary" type="submit" value="Submit">
</form>


</div>

JavaScript

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

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})