tutorials:~ jQuery Toggle Button
jQuery toggle button image

Have you ever seen buttons like this?

I bet you do. Rather, you have seen it everywhere on the internet. There're several ways to create "Toggle Button", Today I'm going to introduce you how to create a simple toggle button with CSS and jQuery.

*What is jQuery? > See here.

The Codepen below contains all of the codes for this tutorial. So you may check it before going through this tutorial, to grasp its overview.

Step 1: Set-ups

Download jQuery file from the jQuery official web page. Choose the top link, "Download the compressed, production jQuery 3.4.1". (The number after "jQuery" can be changed in future. it means jQuery is updated.)

Or, you may also copy the CDN link from their official CDN link page(Choose "jQuery Core 3.4.1", "miniified" version for this tutorial) and paste the CDN link into <head> tag of your HTML. Once you finished embedding jQuery link into your <head>, next step is to create the body of the toggle button.

Step 2: Create the body of the toggle button

Create two <div> tags, for button body and button itself. And then it’s fun part, add CSS onto those <div>s. The code below is just my example code but, you may change to the properties like width, height, color as you like.

HTML:

<div class="wrapper">
<div class="toggleButton"></div>
</div>

CSS:

.wrapper {
  padding:20px;
  border-radius:100px;
  background-color: #ccc;
  width: 200px;
  height: 100px;
  margin-bottom: 30px;
}
.toggleButton {
  width: 100px;
  height: 100px;
  background-color: #6589aa;
  border-radius:50%;
}

Step 3: Create CSS class for jQuery “toggleClass()” method

There are several alternatives to put toggle movement onto buttons. In this tutorial, we will use jQuery “toggleClass()” method. The code below is to move object 100px to its right.

.moveToRight100px{
  margin-left:100px;
}

We will add this class to <div class="toggleButton"> using jQuery toggleClass(), when the button is clicked.

Step 4: Add jQuery toggleClass()

jQuery only require 3 lines to add a toggle function onto the button, while plain JavaScript code needs more lines.

$('.toggleButton').click(function(){
  $('.toggleButton').toggleClass('moveToRight100px');
})

Looking at the code above, You might be able to guess what the code means even without knowledge of jQuery syntax. This code means, "When '.toggleButton' is clicked, function occurs. The function add or delete class '.moveToRight100px' to/from '.toggleButton'. "

After adding this jQuery code, your button will come into play.

Step 5: Adjustment

Now we have our button toggled. However, it looks a bit too robotic. We want a more smooth, comfortable movement when it's toggled.

To create smooth movement, we will add "transition" property to .toggleButton CSS.

.toggleButton {
  transition:1s ease;
}

CSS Transition property allows you to add an effect on an arbitrary object. *W3S CSS Transition

The code above sets ease transition within 1 second on .toggleButton. Please try out clicking the button and look at how it changed its way to move.



Takako Nakajima

Cat person. Gluten-free. Oil painting major, 4 years of design work experience. People in Web development are self-driven, she is an eager learner as well, she likes people in the industry. Her curren... more about Takako Nakajima