How to create Show/Hide password functionality using jQuery?

navya , Credit to  volkotech-solutions Jul 18
Show/hide password functionality using jQuery banner image

Show/hide password functionality is a common feature on login pages, as it helps users to re-check their password and confirm while login, achieve it with jQuery.

Building the markup

First, we will construct the HTML structure with the required inputs needed for the login page. For example, I’m just going with two input fields only, that is username and password, and depending on the requirement you can add the input fields. Here is the structure of HTML.


<!DOCTYPE html>
<html lang="en">
    <title>jQuery show/hide password functionality</title>
    <!-- this is the jQuery cdn link -->
    <script src=""></script>
    <script src="//"></script>
    <link rel="stylesheet" href="./style.css" />
    <div class="wrapper">
      <form action="#" id="Login-form">
        <h1>User Login Form</h1>
        <div class="form-wrapper">
          <div class="userName">
            <label for="name">User Name</label>
              placeholder="userName / email"
          <div class="password">
            <label for="password">Password</label>
            <input type="password" id="password" class="form-control" /><i
              class="toggle-hide-show fa fa-fw fa-eye-slash"
    <script src="./script.js"></script>

When you are done with the html structure, just check for the results and analyze how it is reflected. Here is the screenshot for your reference.

Result of login page with plain HTML

It looks a bit ugly, with the plain HTML. So, let us add some colors to our login form to make it look good.

Basic styling

Before going to apply the actual functionality of show hide password in jquery, let us do some basic CSS to look pretty good compared to a plain one. Here is the basic CSS that I have applied for the project.


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  background: skyblue;
.userName {
  padding: 30px;
.password {
  padding: 0 30px 30px;
.wrapper form {
  border: 1px solid #00000024;
  background: #fff;
  width: 600px;
  max-width: 100%;
  padding: 50px 0;
.wrapper h1 {
  text-align: center;
.userName label,
.password label {
  display: block;
  padding-bottom: 10px;
.userName input,
.password input {
  padding: 5px 10px;
.form-wrapper {
  max-width: 50%;
  display: block;
  margin: 0 auto;
.toggle-hide-show {
  position: relative;
  right: 30px;
input:invalid {
  border-color: red;

After applying all the above styles, let us check for the results, and here is the screenshot for your reference.

Result of login page after applying CSS

Wow, it looks better than the previous one. Now it’s time to apply for the show and hide password functionality. 

jQuery functionality

Here is the required code for our project.


jQuery(".toggle-hide-show").click(function() {
    jQuery(this).toggleClass("fa-eye fa-eye-slash");
    input = jQuery(this).parent().find("input");
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } else {
        input.attr("type", "password");

Final results:

Final result of GIF showing the show/hide password functionality using jQuery

If you want to add autofocus to the first input of your form then click here to get the code.


We have created a simple form with only two inputs, and applied the functionality of toggling showing and hiding the password. Hope you got the exact solution to your requirement, if you are stuck anywhere, please let us know our team will resolve your issues regarding the project.




Read Next