show/hide passwords

by Ravindra Athreya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	

	<div class="input-group">
		<input class="form-control" type="password"/>
		<span id="show-hide-passwd" action="hide" class="input-group-addon glyphicon glyphicon glyphicon-eye-open"></span>
	</div>

CSS

.input-group {
			width: 30%;
			margin: 0 auto;
			margin-top: 50px;
		}
		span {
			cursor: pointer;
		}

JavaScript

$('#show-hide-passwd').on('click', function(e) {
				e.preventDefault();
 
				var current = $(this).attr('action');
 
				if (current == 'hide') {
					$(this).prev().attr('type','text');
					$(this).removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close').attr('action','show');
				}
 
				if (current == 'show') {
					$(this).prev().attr('type','password');
					$(this).removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open').attr('action','hide');
				}
			})