<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <h2 class="col-12">Toggle Password Visibility</h2> <div class="input-group col-7 my-4"> <input type="password" id="password_input" class="form-control" placeholder="password" aria-label="Username" aria-describedby="password_visibility"> <button class="input-group-addon fa fa-eye btn btn-primary btn-sm bg-primary text-white" id="password_visibility"></button> </div> </div> </div>

$(function() { $("#password_visibility").click(function(){ var pass_input = document.getElementById("password_input"); if (pass_input.type === "password") { pass_input.type = "text"; $(this).removeClass("fa-eye").addClass("fa-eye-slash") } else { pass_input.type = "password"; $(this).removeClass("fa-eye-slash").addClass("fa-eye") } }); });