jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<link rel="stylesheet" href="https://mfglabs.github.io/mfglabs-iconset/css/mfglabs_iconset.css">
    <label class="checkbox-label">
        <input type="checkbox" id="show_top10_error_details" class="show-error-details hidden">
        <div class="styled-checkbox"></div>
    </label>

CSS

body {
  padding: 20px;
}
input[type=checkbox].hidden {
  display: none;
}

input[type=checkbox].hidden+.styled-checkbox:before {
  content: "";
}

input[type=checkbox].hidden:checked+.styled-checkbox:before {
  content: "\2713";
}

div.styled-checkbox {
  font-family: 'mfg_labs_iconsetregular' !important;
  display: inline-block;
  font-weight: light;
  color: #1a79bf;
  font-size: 24px;
  vertical-align: middle;
  text-align: center;
  margin-top: 3px;
  margin-left: 8px;

}

label.checkbox-label {
  display: inline-block;
  border: 2px solid #1a79bf;
  border-radius: 3px;
  padding: 5px;
  width: 36px;
  height: 36px;
}

label.checkbox-label:hover {
  -webkit-box-shadow: 0px 0px 0px 8px rgba(152, 190, 219, 1);
  -moz-box-shadow: 0px 0px 0px 8px rgba(152, 190, 219, 1);
  box-shadow: 0px 0px 0px 8px rgba(152, 190, 219, 1);
}

JavaScript

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

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