I am building a website and am having a little issue with toggle switches.
I want to display different buttons with toggle switch.
I’ve built my toggle button but I think there is a problem with the function for switching content.
When I switch on level 2, the result changes, but when I switch on level 1, nothing changes.
Please tell, where is the problem with this code?
$(document).ready(function(){
$('input:radio').change(function(){
if($('input[name="graduate"]:checked').is(":checked")){
$('.ug').hide();
$('.phd').show();
}else{
$('.ug').show();
$('.phd').hide();
}
});
});.btn-price:before {
content: "\f07a";
display: block;
width: 20px;
height: 20px;
float: right;
margin: 0 0 0 6px;
font-family: 'Font Awesome 5 Pro';
}
.btn-price {
display: table;
padding: 10px 30px;
text-decoration: none;
font-size: 1.1em;
margin: 15px auto;
border-radius: 50px;
color: #f4f4f4 !important;
transition: all 0.3s ease 0s;
}
.btn-color-1 {
background-color: #5DADE2;
}
.switcher {
display: inline-block;
height: 40px;
margin-top:17px;
padding: 4px;
background: #fff;
border-radius: 2px;
width: 210px;
border-radius: 30px;
border: solid 1px #ddd;
position: relative;
}
.switcher__input {
display: none;
}
.switcher__label {
float: left;
width: 50%;
font-size: 12px;
line-height: 30px;
text-align: center;
cursor: pointer;
position: inherit;
z-index: 10;
transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
font-weight: unset;
}
.switcher__toggle {
position: absolute;
float: left;
height: 30px;
width: 50%;
font-size: 12px;
line-height: 30px;
cursor: pointer;
background-color: #3366cc;
border-radius: 30px;
left: 5px;
top: 4px;
transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.switcher__input:checked + .switcher__label {
color: #fff;
}
.switcher__input--yang:checked ~ .switcher__toggle {
left: 100px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="ug col-md-6">
<div>
<div>
<a href="#1" class="btn-price btn-color-1">BTN 1</a>
</div>
</div>
</div>
<div class="phd col-md-6" style="display: none" >
<div>
<div>
<a href="#2" class="btn-price btn-color-1">BTN 2</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="switcher">
<input type="radio" name="graduate" value="yin" id="yin" class="switcher__input switcher__input--yin">
<label for="yin" class="switcher__label">Level 2</label>
<input type="radio" name="graduate" value="yang" id="yang" class="switcher__input switcher__input--yang" checked="">
<label for="yang" class="switcher__label">Level 1</label>
<span class="switcher__toggle"></span>
</div>
</div>>Solution :
You are checking checked or not of the radio button using name attribute so once you select any radio button it will remain true every time you click and that’s why it’s always showing button2 in label
Here is updated code
$(document).ready(function(){
$('input:radio').change(function(){
if($('input[name="graduate"]:checked').val() == "yin"){
$('.ug').hide();
$('.phd').show();
}else{
$('.ug').show();
$('.phd').hide();
}
});
});.btn-price:before {
content: "\f07a";
display: block;
width: 20px;
height: 20px;
float: right;
margin: 0 0 0 6px;
font-family: 'Font Awesome 5 Pro';
}
.btn-price {
display: table;
padding: 10px 30px;
text-decoration: none;
font-size: 1.1em;
margin: 15px auto;
border-radius: 50px;
color: #f4f4f4 !important;
transition: all 0.3s ease 0s;
}
.btn-color-1 {
background-color: #5DADE2;
}
.switcher {
display: inline-block;
height: 40px;
margin-top:17px;
padding: 4px;
background: #fff;
border-radius: 2px;
width: 210px;
border-radius: 30px;
border: solid 1px #ddd;
position: relative;
}
.switcher__input {
display: none;
}
.switcher__label {
float: left;
width: 50%;
font-size: 12px;
line-height: 30px;
text-align: center;
cursor: pointer;
position: inherit;
z-index: 10;
transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
font-weight: unset;
}
.switcher__toggle {
position: absolute;
float: left;
height: 30px;
width: 50%;
font-size: 12px;
line-height: 30px;
cursor: pointer;
background-color: #3366cc;
border-radius: 30px;
left: 5px;
top: 4px;
transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
will-change: transform;
}
.switcher__input:checked + .switcher__label {
color: #fff;
}
.switcher__input--yang:checked ~ .switcher__toggle {
left: 100px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="ug col-md-6">
<div>
<div>
<a href="#1" class="btn-price btn-color-1">BTN 1</a>
</div>
</div>
</div>
<div class="phd col-md-6" style="display: none" >
<div>
<div>
<a href="#2" class="btn-price btn-color-1">BTN 2</a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="switcher">
<input type="radio" name="graduate" value="yin" id="yin" class="switcher__input switcher__input--yin">
<label for="yin" class="switcher__label">Level 2</label>
<input type="radio" name="graduate" value="yang" id="yang" class="switcher__input switcher__input--yang" checked="">
<label for="yang" class="switcher__label">Level 1</label>
<span class="switcher__toggle"></span>
</div>
</div>