Horizontal Tab with Picture Expand on Click

Expands to size of container, accounts for multiple containers

by karthick Chandran

HTML

<div class="product-list" id="product_list">
    <div class="tr">
        <div class="item ">	<a href="#" data-id="228">
        <div class="item-top"><img src="http://fpoimg.com/300x300?text=Advertisement" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26"/>					</div>
					<div class="item-bottom">
						<div class="item-product-title">Unicity Activate</div>
					</div>
				</a>

        </div>
        <div class="item ">	<a href="#" data-id="227">
        <div class="item-top"><img style="left:300px;" src="http://fpoimg.com/300x300?text=Advertisement" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product55_24"/>					</div>
					<div class="item-bottom">
						<div class="item-product-title">Lean Complete</div>
					</div>
				</a>

        </div>
        <div class="item ">	<a href="#" data-id="228">
        <div class="item-top"><img src="http://fpoimg.com/300x300?text=Advertisement" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26"/>					</div>
					<div class="item-bottom">
						<div class="item-product-title">Bios Life D</div>
					</div>
				</a>

        </div>
    </div>
</div>

CSS

#product_list {
    text-align: center;
    position:relative;
    width:100%;
    margin:0px;
    padding:0px;
}
.tr {
    position:relative;
    margin:0px;
    border: 5px solid transparent;
}
.product-list .item {
    position: absolute;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.item-top img {
    width: 200px;
    height: 200px;
}
.item-bottom {
    padding: 8px;
}
.item-bottom .item-product-title {
    text-align:left;
}
.item a {
    color:black;
    text-decoration:none;
    background-color:blue;
}

JavaScript

var myPadding = 10;
var myWidth = 0 - myPadding;
var myHeight = 0;
var numRows = $(".tr").length;
var allItemHeights = [];
var allItemWidths = [];
var allItemLefts = [];
var allItemsTextLefts = [];
var allItemsTextTops = [];
var parentBorderWidth = parseInt($(".tr").css("border-left-width"), 10);
for (var j = 0; j < numRows; j++) {
    var numItems = $(".tr:eq(" + j + ") .item").length;
    var parentPositionLeft = $(".tr:eq(" + j + ")").offset().left;
    for (var i = 0; i < numItems; i++) {
        var itemWidth = $(".item:eq(" + i + ")").outerWidth();
        $(".item:eq(" + i + ")").css({
            left: myWidth + parentPositionLeft + "px"
        });
        myWidth = myWidth + itemWidth + myPadding;
        thisHeight = $(".item:eq(" + i + ")").outerHeight();
        allItemHeights.push($(".item:eq(" + i + ")").height());
        allItemWidths.push($(".item:eq(" + i + ")").width());
        allItemLefts.push(parseInt($(".item:eq(" + i + ")").css("left"), 10));
        allItemsTextLefts.push($(".item:eq(" + i + ") .item-bottom").position().left);
        allItemsTextTops.push($(".item:eq(" + i + ") .item-bottom").position().top);

        if (thisHeight > myHeight) {
            myHeight = thisHeight;
        }
    }
    $(".tr:eq(" + j + ")").css({
        width: myWidth + "px",
        height: myHeight + "px"
    });
}
var openItem = false;
$('.item').click(function () {
    var par = $(this);
    var eq = $(".item").index(this);
    var left = allItemLefts[eq];
    var textLeft = allItemsTextLefts[eq];
    var textTop = allItemsTextTops[eq];
    if (!openItem) {
        par.css({
            zIndex: '9999'
        });
        par.animate({
            height: '300px',
            width: myWidth + 5 + 'px',
            left: -parentBorderWidth + "px"
        }, 500);
        $(".item:eq(" + eq + ") img").animate({
            "margin-left": -((myWidth / 2) + parentBorderWidth + myPadding) + "px",
            height: 300 + "px",
            width: 300 +...