Custom toggle switch with pure HTML, CSS and JQuery with smooth transition


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  5. <script>
  6. $(document).ready(function(){
  7.    $("#outer").click(function(){
  8. if($("#inner").css('margin-left') == '1px')
  9. {
  10.    $("#inner").css('margin-left','34px'); 
  11.  $("#inner").html('ON');
  12. }
  13. else
  14. {
  15.   $("#inner").css('margin-left','1px'); 
  16.  $("#inner").html('OFF');
  17. }
  18.    });
  19. });

  20. </script>
  21. <style>
  22. #outer, #inner {
  23. cursor:pointer;
  24. border-radius:5px;
  25.   text-align: center;
  26. color:#FFF;
  27. height:18px;
  28.  transition-property: margin-left;
  29.     transition-duration: 0.25s;
  30.     transition-timing-function: linear;
  31. }
  32. </style>
  33. </head>
  34. <body>

  35. <div id="outer" style="width:70px;background: rgb(188, 188, 188);"> <div id="inner" style="margin-left:1px;width:35px;background: rgb(0, 102, 153);">OFF</div> </div>
  36. </body>
  37. </html>





Comments