Isotope Filter and Expanding

Isotope Filter and Expanding

HTML

<script src="http://isotope.metafizzy.co/isotope.pkgd.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="itemsWrapper col-lg-12">
                <h1>
                    Isotope - animate percentage item width with jQuery</h1>
             ...

CSS

/* Sticky footer styles
-------------------------------------------------- */
*:focus
{
    outline: 0 !important;
}
a:hover, a:focus, .btn:hover, .btn:focus
{
    text-decoration: none !important;
}
html
{
    position: relative;
    min-height: 100%;
}
body
{
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%; /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container
{
    padding: 60px 15px 0;
}
.container .text-muted
{
    margin: 20px 0;
    text-align: center;
}

.footer > .container
{
    padding-right: 15px;
    padding-left: 15px;
}

code
{
    font-size: 80%;
}
/*****************************************************************************************************/
/*grid list click enlarge start*/
*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    font-family: sans-serif;
}

.isotope
{
    /*background: #DDD;*/
    max-width: 1200px;
}
.isotope .item
{
    padding-bottom: 10px;
    padding-right: 10px;
}
.item
{
    float: left;
}

/* item is invisible, but used for layout */
.item, .grid-sizer
{
    width: 9%;
}

.item
{
    height: 100px;
    border: none;
    background: transparent;
}

/* item-content is visible, and transitions size */
.item-content
{
    width: 100%;
    height: 100%;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
    -webkit-transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -o-transition: width 0.4s, height 0.4s;
    transition: width 0.4s, height 0.4s;
}

.item:hover .item-content
{
    background: #8CF;
    cursor: pointer;
}

/* both item and item content change size */
.item.is-expanded, .element-item.is-expanded
{
   ...

JavaScript

var transitionProp = getStyleProperty('transition');
        var transitionEndEvent = {
            WebkitTransition: 'webkitTransitionEnd',
            MozTransition: 'transitionend',
            OTransition: 'otransitionend',
            transition: 'transitionend'
        }[transitionProp];

        $(function () {

            var $container = $('.isotope').isotope({
                itemSelector: '.item',
                masonry: {
                    columnWidth: '.grid-sizer'
                }
            });
            
          
            $container.on('click', '.item-content', function (event) {
                var $this = $(this);
                var previousContentSize = getSize(this);
                // disable transition
                this.style[transitionProp] = 'none';
                // set current size
                $this.css({
                    width: previousContentSize.width,
                    height: previousContentSize.height
                });

                $(".item-content").parent().removeClass('is-expanded'); //IS USED TO REMOVE CLASS "IS-EXPANDED" FROM THE PREVIOUS ITEM.

                var $itemElem = $this.parent().toggleClass('is-expanded');

                // force redraw
                var redraw = this.offsetWidth;

                // renable default transition
                this.style[transitionProp] = '';

                // reset 100%/100% sizing after transition end
                if (transitionProp) {
                    var _this = this;
                    var onTransitionEnd = function () {
                        _this.style.width = '';
                        _this.style.height = '';
                    };
                    $this.one(transitionEndEvent, onTransitionEnd);
                }
                // set new size
                var size = getSize($itemElem[0]);
                $this.css({
                    width: size.width,
                    height: size.height
                });
   ...