Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Iphone Like Slide Toggle Button Using jQuery CSS and HTML.

Thursday, Sep 28, 2017

Tags:- jQuery CSS HTML


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.


See Demo
Toggle Button


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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.