<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-2"> <h3><span class="label label-default clickMe" for="textBox1">Click Me</span></h3> <input value="" type="text" id="textBox1" name="textBox1" class="blur" hidden> </div> <div class="col-sm-2"> <h3><span class="label label-default clickMe" for="textBox2">Click Me Too!</span></h3> <input value="" type="text" id="textBox2" name="textBox2" class="blur" hidden> </div> <div class="col-sm-4">Simple and requires no extra CSS or complex JS. Just ensure you have the span[for] and input[id] the same. Then you can use this multiple times in a page. </div> </div> </div>

body { padding-top: 70px; /* Just for BootSnipp Preview. Not required. */ }

$('.clickMe').click(function () { "use strict"; $(this).hide(); $('#' + $(this).attr('for')) .val($(this).text()) .toggleClass("form-control") .show() .focus(); }); $('.blur').blur(function () { "use strict"; $(this) .hide() .toggleClass("form-control"); var myid = (this).id; $('span[for=' + myid + ']') .text($(this).val()) .show(); });