✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Iphone Like Slide Toggle Button Using jQuery CSS and HTML

Last Updated : Jul 1, 2023

IN - jQuery CSS HTML | Written & Updated By - Dikshita

In this tutorial we will create a Stylish Iphone like Slide Toggle Button using jQuery,CSS and HTML. You may also like fancy animated buttons using CSS3.

Iphone Like Slide Toggle Button Using jQuery CSS and HTML

CHECK OUT THIS TUTORIAL LIVE DEMO →

To create a Iphone Like Slide Toggle Button it takes only two steps:-

  1. Make a HTML file and define markup and script for Slide Toggle Button
  2. Make a CSS file and define styling for Slide Toggle Button

Step 1. Make a HTML file and define markup and script for Slide Toggle Button

We make a HTML file and save it with a name toggle_button.html 

<html>
<head>
  <link rel="stylesheet" type="text/css" href="button_style.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    function choose()
    {
	   var val=document.getElementById("choose");
	   if(val.value=="off")
	   {
		  on();
	   }
	   else
	   {
	      off();
	   }
    }

    function on()
    {
	   $("#inner").animate({marginLeft:'50px'},function(){
	     document.getElementById("choose").value="on";
	     document.getElementById("wrapper").style.background="#04B404";
	     document.getElementById("on").checked=true;
	     document.getElementById("off").checked=false;
	   });	
	}
   
    function off()
    {
	   $("#inner").animate({marginLeft:'0px'},function(){
	     document.getElementById("choose").value="off";
	     document.getElementById("wrapper").style.background="#E6E6E6";	
	     document.getElementById("off").checked=true;
	     document.getElementById("on").checked=false;
	   });
	}
  </script>
</head>

<body>
  <h1>Iphone Like Slide Toggle Button Using jQuery and CSS</h1>
  <div id="wrapper">
    <div id="inner" onclick="choose()"></div>
  </div>

  <div id="checkbox_div">
    <input type="checkbox" id="on" value="ON">ON
    <input type="checkbox" id="off" value="OFF">OFF
  </div>

  <input type="hidden" value="off" id="choose">

  </body>
</html>

In this step we define all the markups for Slide Toggle Button and we use jQuery animate() function to slide the button you can also use CSS3 Transition for Sliding.

In this step we make two div for toggle button for its functioning "wrapper"and "inner" and we make a hidden field for getting the button state default state is off and when we on the toggle button its value changes to on and when we off the toggle button its value changes to OFF so that we can know what function to call.

For toggle button On and OFF we made three javascript functions choose is used to get the state if the value is OFF we call the ON function and if the value is ON we call OFF function.

You may also like create toggle panel using HTML5.

Step 2. Make a CSS file and define styling for Slide Toggle Button

We make a CSS file and save it with name button_style.css. 

body
{
	background-color:#0B2F3A;
	color:#298A08;
}
h1
{
	margin-top:170px;
	text-align:center;
	font-family:helvetica;
	color:#298A08;
}
#wrapper
{
	margin-left:40%;
	margin-top:70px;
	width:100px;
	background-color:#E6E6E6;
	height:50px;
	border-radius:50px;
	box-shadow:0px 0px 10px 0px black;
}
#wrapper #onlabel
{
	float:left;
	display:none;
	font-size:18px;
	color:white;
	font-family:helvetica;
	margin:0px;
	margin-top:7px;
	margin-left:10px;
}
#wrapper #offlabel
{
	float:left;
	display:none;
	font-size:18px;
	color:white;
	font-family:helvetica;
	margin:0px;
	margin-top:7px;
	margin-left:55px;
}
#inner
{
	width:50px;
	background-color:white;
	height:50px;
	border-radius:50%;
	box-shadow:0px 0px 10px 0px grey;
}
#checkbox_div
{
	margin-top:50px;
	margin-left:40%;
}
input[type="checkbox"]
{
	width:20px;
	height:20px;
}

Thats all, this is how to create a Iphone Like Slide Toggle Button using jQuery,CSS and HTML. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on iphone toggle button using jquery and css helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →