jQuery toggleClass example

Toggle class name on click in jQuery

by gibito

HTML

<div id="banner-message">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
  <!-- Background -->
  <rect width="800" height="500" fill="#f8f9fa" rx="10" ry="10" />
  
  <!-- Title -->
  <text x="400" y="50" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#333">The Data Obesity Paradox</text>
  <text x="400" y="80" font-family="Arial, sans-serif" font-size="16" text-anchor="middle" fill="#666">More data doesn't always mean better insights</text>
  
  <!-- Axes -->
  <line x1="100" y1="400" x2="700" y2="400" stroke="#333" stroke-width="2" />
  <line x1="100" y1="400" x2="100" y2="100" stroke="#333" stroke-width="2" />
  
  <!-- X-axis label -->
  <text x="400" y="450" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#333">Data Volume</text>
  
  <!-- Y-axis label -->
  <text x="50" y="250" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" transform="rotate(-90, 50, 250)" fill="#333">Accuracy / Insights</text>
  
  <!-- X-axis markers -->
  <text x="150" y="430" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Small Data</text>
  <line x1="150" y1="395" x2="150" y2="405" stroke="#333" stroke-width="2" />
  
  <text x="400" y="430" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Fit Data</text>
  <line x1="400" y1="395" x2="400" y2="405" stroke="#333" stroke-width="2" />
  
  <text x="650" y="430" font-family="Arial, sans-serif" font-size="14" text-anchor="middle" fill="#333">Data Obesity</text>
  <line x1="650" y1="395" x2="650" y2="405" stroke="#333" stroke-width="2" />
  
  <!-- Y-axis markers -->
  <text x="85" y="350" font-family="Arial, sans-serif" font-size="14" text-anchor="end" fill="#333">Low</text>
  <line x1="95" y1="350" x2="105" y2="350" stroke="#333" stroke-width="2" />
  
  <text x="85" y="200" font-family="Arial, sans-serif" font-size="14" text-anchor="end" fill="#333">High</text>
 ...

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