<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">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="test-1">
<div class="col-md-6">
<div class="input-controls-container">
<textarea class="form-control" placeholder="Comment..."></textarea>
<div class="input-controls">
<div class="btn-group">
<button class="btn btn-link">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
<button class="btn btn-link">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-controls-container expand">
<textarea class="form-control">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia aliquet justo, vitae ullamcorper lectus dictum in. Nunc pulvinar rutrum erat sed condimentum. Aliquam erat volutpat. Vivamus tristique sem nibh. Pellentesque sollicitudin auctor urna et volutpat. Mauris et ex eu enim molestie ornare. Maecenas fermentum odio ac erat vehicula pretium. Maecenas tincidunt molestie leo, sed semper tortor vulputate quis. Morbi blandit congue augue et volutpat. </textarea>
<div class="input-controls">
<div class="btn-group">
<button class="btn btn-link">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
<button class="btn btn-link">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="test-2">
<div class="col-md-6">
<div class="input-controls-container">
<textarea class="form-control"></textarea>
<div class="input-controls">
<div class="btn-group">
<button class="btn btn-link">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
<button class="btn btn-link">
<span class="glyphicon glyphicon-ok"></span>
</button>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-controls-container expand">
<textarea class="form-control">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia aliquet justo, vitae ullamcorper lectus dictum in. Nunc pulvinar rutrum erat sed condimentum. Aliquam erat volutpat. Vivamus tristique sem nibh. Pellentesque sollicitudin auctor urna et volutpat. Mauris et ex eu enim molestie ornare. Maecenas fermentum odio ac erat vehicula pretium. Maecenas tincidunt molestie leo, sed semper tortor vulputate quis. Morbi blandit congue augue et volutpat. </textarea>
<div class="input-controls">
<div class="btn-group">
<button class="btn btn-link">
<span class="glyphicon glyphicon-paperclip"></span>
</button>
<button class="btn btn-link">
<span class="glyphicon glyphicon-ok"></span>
Text
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.test-1 .input-controls-container {
position: relative;
}
.test-1 .input-controls-container .form-control {
height: 32px;
}
/*.input-controls-container .form-control:focus, */
.test-1 .input-controls-container.expand .form-control {
padding-bottom: 25px;
height: auto;
}
.test-1 .input-controls-container .input-controls {
position: absolute;
bottom: 0;
right: 10px;
padding: 2px 0px;
}
.test-1 .input-controls-container.expand .input-controls {
padding: 0 10px;
}
.test-1 .input-controls-container .input-controls .btn-link {
padding: 2px 10px;
color: #555;
}
.test-1 .input-controls-container .input-controls .btn-link:hover {
color: #111;
}
.test-2 .input-controls-container {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
color: #555;
display: block;
font-size: 14px;
padding: 0;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
}
.test-2 .input-controls-container .form-control {
border: 0;
height: 32px;
}
.test-2 .input-controls-container.expand .form-control {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
height: auto;
}
.test-2 .input-controls-container .input-controls {
display: none;
text-align: right;
padding: 0;
border-top: 1px solid #dfdfdf;
}
.test-2 .input-controls-container.expand .input-controls {
display: block;
}
.test-2 .input-controls-container .input-controls .btn-link {
padding: 2px 10px 0;
color: #555;
text-decoration: none;
}
.test-2 .input-controls-container .input-controls .btn-link:hover {
color: #111;
}
$(function(){
$('body')
.on('focus','.input-controls-container textarea',function(){
$(this).closest('.input-controls-container').addClass('expand');
})
.on('blur','.input-controls-container textarea',function(){
if ($.trim($(this).val())) {
return;
}
$(this).closest('.input-controls-container').removeClass('expand');
});
});
