$(function() {
$('.password-toggle').click(function() {
if ($(this).find('.icon').hasClass('icon-eye-close')) {
$(this).find('.icon').addClass('icon-eye-open').removeClass('icon-eye-close');
$('.password').prop('type', 'text');
} else {
$(this).find('.icon').addClass('icon-eye-close').removeClass('icon-eye-open');
$('.password').prop('type', 'password');
}
});
});
<form class="well form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label text-right" for="input_username">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="input_username">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label text-right" for="input_password">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control password" id="input_password" value="$ecReT-p@s$">
<span class="btn btn-default password-toggle" title="show or hide the password"><i class="icon icon-eye-open"></i> show or hide the password</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<input type="submit" class="btn btn-default" value="log in" />
</div>
</div>
</form>
External resources loaded into this fiddle: