JSFiddle - React, Tailwind, and code Playground

by BenjamĂ­n Xolotl Torres Luna

HTML

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
	<input type="text" class="input-medium" style="display:none;">
    <div class="controls" id="edit">
        <a href="#" onclick="edit(this);">Edit</a>
    </div>
    <div class="controls" id="cancel"  style="display:none;">
        <a href="#" onclick="cancel(this);">Cancelar</a>
    </div>
    <div class="controls" id="save"  style="display:none;">
        <a href="#" onclick="save(this);">Guardar</a>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

function edit(element) {
	var parent=$(element).parent().parent();
	var placeholder=$(parent).find('.text-info').text();
	//hide label
	$(parent).find('label').hide();
	$(parent).find('#edit').hide();
	$(parent).find('#save').show();
	$(parent).find('#cancel').show();
	//show input, set placeholder
	var input=$(parent).find('input[type="text"]');
	$(input).show();
	$(input).attr('placeholder', placeholder);
}