Editable Boxes

by myrluk3

HTML

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="container" style="width:500px">
    <div class="box">
        <!-- <div>1st schedule</div> -->
        <i class="fa fa-pencil"></i>
    </div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
    <div class="box"><i class="fa fa-pencil"></i></div>
</div>

CSS

.box {
    height: 50px;
    width: 150px;
    background-color: lightblue;
    display: inline-block;
    margin: 5px;
    border: 1px solid cyan;
    border-radius: 2px;
    float: left;
}

.box i {
    float: right;
    color: white;
    margin: 5px;
    cursor: pointer;
}

.box div {
	margin: 10px;
	float: none;
}

JavaScript

var $previousOpened;
$('.box i').click(function() {
    var $icon = $(this),
        $box = $icon.parent(),
        justHide = $icon.hasClass('fa-times');

    justHide && ($box = undefined);
    if ($previousOpened) {
        $previousOpened.animate({
            width: 150,
            height: 50
        }, 500);
        var $prevIcon = $previousOpened.find('i');
        $prevIcon.removeClass('fa-times');
        $prevIcon.addClass('fa-pencil');
    }

    if ($box) {
        $icon.removeClass('fa-pencil');
        $icon.addClass('fa-times');
        $box.animate({
            width: 170,
            height: 100
        }, 500);
    }
    $previousOpened = $box;
});