Edit label

by Michel Plungjan

HTML

<div class="control-group">
    <label for="name" class="control-label">
        <p class="text-info">123<i class="icon-star"></i></p>
    </label>
    <input type="text" class="edit-input" />
    <div class="controls">
        <a class="edit" href="#">Edit</a>
    </div>
</div>

CSS

.edit-input {
    display:none;
}

JavaScript

$(function() {
  $('a.edit').on("click",function(e) {
    e.preventDefault();
    var dad = $(this).parent().parent();
    var lbl = dad.find('label'); 
    lbl.hide();
    dad.find('input[type="text"]').val(lbl.text()).show().focus();
  });
    
  $('input[type=text]').focusout(function() {
      var dad = $(this).parent();
      $(this).hide();
      dad.find('label').text(this.value).show();
  });
});