WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to Add A Toggle For Password Visibility

In today’s tutorial, we’re going to show you how to add a toggle icon next to your password to show/hide the value.

The way in which we will be adding this is using jQuery, Bootstrap 4 with Font Awesome. This can be done without Bootstrap and Font Awesome, but these days, these are often used for a lot of websites.

If you prefer, you can check this out on CodePen.

Let’s dive right into it and start with your HTML markup:


<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">
      <form>
        <div class="form-group">
          <label>Password</label>
          <div class="input-group" id="show_hide_password">
            <input class="form-control" type="password" value="mypassword">
            <div class="input-group-addon">
              <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

And here’s the jQuery code to go along with it:


$(document).ready(function () {
  $("#show_hide_password a").on("click", function (event) {
    event.preventDefault();
    $("#show_hide_password i").toggleClass('fa-eye fa-eye-slash');
    if ($("#show_hide_password input").attr("type") == "text") {
      $("#show_hide_password input").attr("type", "password");
    } else if ($("#show_hide_password input").attr("type") == "password") {
      $("#show_hide_password input").attr("type", "text");
    }
  });
});

And there you have it. There are other ways to do this, we can use an icon instead of integrating Font Awesome, we could even add a checkbox to reveal the password but I think it’s quite commonly used to have the eye icon with password reveals these days. Do you have another way you like to add this? Let us know in the comments below.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion

Related Posts

Related - How to Change Breakpoints with Bootstrap

CSS / 3rd October 2020

How to Change Breakpoints with Bootstrap

Read More Related - How to change the Bootstrap 4 Carousel to a Fade Transition instead of Sliding

CSS / 21st September 2020

How to change the Bootstrap 4 Carousel to a Fade Transition instead of Sliding

Read More