jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://use.fontawesome.com/releases/v5.8.0/css/all.cs"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"></script>
<div  style="position: relative; width: 600px; height: 300px" id="canvContainer">
    <span class="guide-line" style="position: absolute; left: 470px; top:0px; z-index: 2; height: 100%; width: 130px; border-left: 1px solid #FF00FF;"></span>

	<span class="guide-line" style="position: absolute; left: 0px; top:0px; z-index: 2; height: 100%; width: 130px; border-right: 1px solid #FF00FF;"></span>

	<span class="guide-line" style="position: absolute; left: 0px; top:0px; z-index: 2; height: 36px; width: 600px; border-bottom: 1px solid #00FFFF;"></span>

	<span class="guide-line" style="position: absolute; left: 0px; bottom: 0px; z-index: 2; height: 36px; width: 600px; border-top: 1px solid #00FFFF;"></span>
							
							
	<span class="guide-padding d-flex justify-content-center align-items-center" style="position: absolute; left: 470px; top:0px; z-index: 4; height: 100%; width: 130px; background-color: rgba(100,0,100,.2); color: #FFFFFF; display: none;">130px</span>

	<span class="guide-padding d-flex justify-content-center align-items-center" style="position: absolute; left: 0px; top:0px; z-index: 4; height: 100%; width: 130px; background-color:  rgba(100,0,100,.2); color: #FFFFFF;">130px</span>

	<span class="guide-padding d-flex justify-content-center align-items-center" style="position: absolute; left: 0px; top:0px; z-index: 4; height: 36px; width: 600px; background-color:  rgba(0,100,100,.2); color: #FFFFFF;">36px</span>

	<span class="guide-padding d-flex justify-content-center align-items-center"...

CSS

body {
  font-family: 'Montserrat', sans-serif;
}

		
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

JavaScript

$(function() {
	//this one works
    $('#showGuides').change(function () {
        $('.guide-line').toggle();
    });
    
	//this one doesn't
    $('#showPadding').change(function () {
       $('guide-padding.d-flex.justify-content-center.align-items-center').toggle();
       
       /*
       I've also tried
       $('.guide-padding').toggle();
       $('span.guide-padding').toggle();
       
       if($(this).prop("checked")) {
       		$('.guide-padding').show();
       } else {
       		$('.guide-padding').hide();
       }
       */
    });
    
    $('#singleclasstest').click(function () {
        $('.guide-padding').toggle();
    });
})