jQuery toggleClass example

Toggle class name on click in jQuery

by hbmaam hbmaam

HTML

<body>
  <div class="box">
    <div class="left">leftleftleftleftleftleftleftleft</div>
    <div class="right">right</div>
    <div class="clear" />
  </div>
</body>

CSS

div.box {
      background: red;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }

JavaScript

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

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