Show and Hide password

by Akram kamal

HTML

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<div>
  <label for="password">Password</label>

  <input type="password" id="password" value="">
  <label  id="toggle-password">Show</label>
</div>

JavaScript

(function($) {
  $.toggleShowPassword = function(options) {
    var settings = $.extend({
      field: "#password",
      control: "#toggle_show_password",
    }, options);

    var $control = $(settings.control);
    var $field = $(settings.field)

    $control.on('click', function() {
      if ($field.attr('type') == 'password') {
        $field.attr('type', 'text');
        $control.text('Hide');
      } else {
        $field.attr('type', 'password');
        $control.text('Show');
      }
    })
  };
}(jQuery));

$.toggleShowPassword({
  field: '#password',
  control: '#toggle-password'
});