In this post, we are going to design an On/Off Toggle Switch using HTML, CSS and JQuery.
Full Source Code for On/Off Toggle Switch :
<style type="text/css">
.onoff{
height: 20px;
padding:2px 5px;
color:#fff;
border-radius: 5px;
width:70px;
text-align: center;
margin-bottom: :20px;
margin-top:20px;
}
.onoff-on:before{
content: 'ON';
}
.onoff-off:before{
content: 'OFF';
}
.onoff-on{
background-color: #00a65a;
border-color: #008d4c;
border-right: 70px solid #ddd;
cursor: pointer;
}
.onoff-off{
background-color: #f56954;
border-color: #f4543c;
border-left: 70px solid #ddd;
cursor: pointer;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<h1 style="text-align:center;">On/Off Toggle Switch using CSS and JQuery</h1>
<div class="wrapper">
<div class="onoff onoff-on"></div>
<div class="onoff onoff-off"></div>
</div>
<script type="text/javascript">
$(document).on('click','.onoff',function(){
$(this).toggleClass('onoff-on');
$(this).toggleClass('onoff-off');
});
</script>
You can follow this video for full guidance :
