Minimize and maximize in action

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="panel panel-primary">
    <div class="panel-heading">
        Hell hath no fury
        <span class="panel-functions">
            <i class="fa-ob-icon glyphicon glyphicon-minus"></i>
            <i class="fa-ob-icon fa fa-times"></i>
        </span>
    </div>
    <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut accumsan elit. Quisque quis imperdiet nulla. Aliquam id viverra tortor, sed rhoncus odio. Duis pulvinar justo sit amet lacus mattis feugiat. Cras scelerisque leo lectus, ac ultricies lorem posuere nec. Nulla eu mauris in eros sodales varius sit amet eget nibh. Fusce ornare id ipsum non scelerisque.

Donec commodo egestas neque, nec suscipit sem euismod scelerisque. Sed nec laoreet est, sit amet tincidunt dolor. Cras ac laoreet lorem. Vestibulum sagittis arcu vitae risus molestie, a lacinia ipsum pharetra. Quisque pulvinar orci vitae felis varius consectetur. Morbi et dolor eleifend enim suscipit pretium. Quisque ac orci sit amet quam porta ultrices. Donec lobortis metus libero, quis sagittis elit vehicula ut. Suspendisse eros arcu, rutrum in justo non, suscipit consequat libero. Pellentesque accumsan sit amet leo eget tincidunt. Etiam volutpat sapien non magna mattis, quis tristique massa convallis. Quisque adipiscing augue sed porttitor elementum. Ut mollis libero ut fermentum auctor. Aliquam eget erat eget elit sollicitudin auctor.
    </div>
</div>

CSS

body{
    padding: 20px;
}
.panel-functions{
    float: right;
}
.panel-functions>.fa-ob-icon{
    margin: 0 0.5em;
    padding: 0.2em;
    -webkit-transition: all 0.1s ease-in;
    border-radius: 100%;
}

.panel-functions>.fa-ob-icon:hover{
    background-color: white;
    color: #2c3e50;
}
.panel-heading{
    -webkit-transition: all 1s ease;
}
.panel-heading:hover{
    background-color:red;
}
.panel.minimize>.panel-heading{
position: absolute;
bottom: 0;
left: 0;
display: flex;
}

JavaScript

$(".panel-functions>.glyphicon-minus").on('click', function(){
    $(this).parents(".panel").toggleClass("minimize");
});