Border Toggle Class

Small code to toggle border

by Venkatesh Dematti

HTML

<body>
  <div class="container">
    <form action="">
      <div id="main">
       <div class="border">
          <input type="text">
       </div>
       <div class="border">
        <input type="text">
        </div>
        <div class="border">
        <input type="text">
        </div>
      </div>
    </form>
  </div>
</body>

CSS

*{
  box-sizing:border-box;
}
#main{
  background:Slategray;
}
.toggle{
  border-left:2px solid red;
}
.border{
      padding-left: 20px;
    margin-bottom: 20px;
    box-sizing:content-box;
}

JavaScript

$(document).ready(function(){
	$('input').focusin(function(){
  	var that = $(this);
    var found = $(that).parent();
    $(found).addClass('toggle');
  });
  $('input').focusout(function(){
  	var that = $(this);
    var found = $(that).parent();
    $(found).removeClass('toggle');
  });
});