jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<a href="https://saga.so/6b8ecf1a-2c98-40dd-a08f-c5df44bdccd5">MV2</a>
<a href="https://saga.so/1f0b496d-6f3b-4b44-adfb-b6f8599808c3">MV2</a>
<a href="https://saga.so/940565ab-aafc-41e0-84c1-962f244e82b3">MV2</a>
<a href="https://saga.so/18880bce-901a-4d37-b510-652a25b339e8">MV2</a>
<a href="https://saga.so/32dc2e2d-e718-4cbb-9dd2-63a183cb7239">MV2</a>
<a href="https://saga.so/32dc2e2d-e718-4cbb-9dd2-63a183cb7239">MV2</a>
<a href="https://saga.so/7d60be25-0f7d-476e-b304-f2a67380d870">MV2</a>
<a href="https://saga.so/1a93bb44-d3d5-4c99-a00d-e23187187a83">MV2</a>
<a href="https://saga.so/e5bcf239-4e86-401e-bdbf-283c4e100374">MV2</a>
<a href="https://saga.so/b8fb7f38-ffca-4931-982b-3f0153f8198e">MV2</a>
<a href="https://saga.so/9a85e133-8b93-40d1-9405-e4b36222f9a4">MV2</a>
<a href="https://saga.so/c1c99930-422c-4671-8da4-3821c04046d7">MV2</a>

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", () => {
  banner.toggleClass("alt")
})