jQuery toggleClass example

Toggle class name on click in jQuery

by Nabaraj Saha

HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script 
            src="https://rawgit.com/chartjs/chartjs.github.io/master/dist/master/Chart.min.js"
        ></script>
        <script
            src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"
        ></script>

        <title>Pie Chart Outlabels</title>
    </head>
    <body>
        <div id="chart-wrapper">
            <canvas id="outlabeledChart"></canvas>
        </div>
        <script id="script-construct">
            var chart = new Chart('outlabeledChart', {
                type: 'outlabeledPie',
                data: {
                    labels: [
                        'ONE',
                        'TWO',
                        'THREE',
                        'FOUR',
                        'FIVE',
                        'SIX',
                        'SEVEN',
                        'EIGHT',
                        'NINE',
                        'TEN'
                    ],
                    datasets: [{
                        backgroundColor: [
                            '#FF3784',
                            '#36A2EB',
                            '#4BC0C0',
                            '#F77825',
                            '#9966FF',
                            '#00A8C6',
                            '#379F7A',
                            '#CC2738',
                            '#8B628A',
                            '#8FBE00'
                        ],
                        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                    }]
                },
                options: {
                    zoomOutPercentage: 55, // makes chart 55% smaller (50% by default, if the preoprty is undefined)
                    plugins: {
                        legend: false,
                        outlabels: {
                     ...

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