jQuery toggleClass example

Toggle class name on click in jQuery

by michananya

HTML

<div class="container">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

CSS

body {
  font-family: Helvetica;
}

.container {
  display: flex;
align-items: stretch;
flex-wrap : wrap;
}

.content {
    background-color: #f2f2f2;
    padding: 20px;


}

.sidebar {
  width: 33%;
  max-width: 500px;
  min-width: 330px;
  background-color: #f2f2f2;
  padding: 20px;

}

JavaScript

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

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