CodePen

HTML

            
              <div class="info-grid" id="info-grid">
	<div class="grid">
    <h2>Header 1</h2>
		<a class="img-anchor image-1" href="http://www.dte.web.id" title="Creedit link? Maybe?"></a>
		<dl>
			<dt>Lorem Ipsum 1</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 2</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 3</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 4</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 5</dt>
			<dd>Content here...</dd>
		</dl>
	</div>
	<div class="grid">
    <h2>Header 2</h2>
		<a class="img-anchor image-2" href="http://www.dte.web.id"></a>
		<dl>
			<dt>Lorem Ipsum 1</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 2</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 3</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 4</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 5</dt>
			<dd>Content here...</dd>
		</dl>
	</div>
	<div class="grid">
    <h2>Header 3</h2>
		<a class="img-anchor image-3" href="http://www.dte.web.id"></a>
		<dl>
			<dt>Lorem Ipsum 1</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 2</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 3</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 4</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 5</dt>
			<dd>Content here...</dd>
		</dl>
	</div>
	<div class="grid">
    <h2>Header 4</h2>
		<a class="img-anchor image-4" href="http://www.dte.web.id"></a>
		<dl>
			<dt>Lorem Ipsum 1</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 2</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 3</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 4</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 5</dt>
			<dd>Content here...</dd>
		</dl>
	</div>
	<div class="grid">
    <h2>Header 5</h2>
		<a class="img-anchor image-5" href="http://www.dte.web.id"></a>
		<dl>
			<dt>Lorem Ipsum 1</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 2</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 3</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 4</dt>
			<dd>Content here...</dd>
			<dt>Lorem Ipsum 5</dt>
			<dd>Content here...</dd>
		</dl>
	</div>
	<div class="clear"></div>
</div>
            
          
!

CSS

            
              /* Another JQuery InfoGrid Method */

html {overflow-y:scroll}

body {
  background-color:#eee;
  padding:50px;
}

.info-grid {
  font:normal normal 13px/1.4 Georgia,Serif;
  color:white;
  overflow:visible;
  width:100%;
  border-left:1px solid white;
}

.info-grid .grid {
  float:left;
  width:20%;
  overflow:hidden;
}

.info-grid h2 {
  color:black;
  margin:0 0 .5em;
  font-size:16px;
  text-align:center;
}

.info-grid .grid .img-anchor {
  display:block;
  height:100px;
  overflow:hidden;
  background-color:#111;
  border:1px solid white;
  border-bottom:none;
  margin-left:-1px;
  background-position:50% 0;
  background-repeat:no-repeat;
}

.info-grid dl,
.info-grid dt,
.info-grid dd {
  margin:0 0;
  padding:0 0;
}

/* .info-grid img {
  display:block;
  width:100%;
  height:auto;
  margin:0 0;
  padding:0 0;
  border:none;
} */

/* set individual background for each grid */
.info-grid .image-1 {background-image:url('http://css-tricks.com/examples/InfoGrid/images/superman.jpg')}
.info-grid .image-2 {background-image:url('http://css-tricks.com/examples/InfoGrid/images/batman.jpg')}
.info-grid .image-3 {background-image:url('http://css-tricks.com/examples/InfoGrid/images/aquaman.jpg')}
.info-grid .image-4 {background-image:url('http://css-tricks.com/examples/InfoGrid/images/spiderman.jpg')}
.info-grid .image-5 {background-image:url('http://css-tricks.com/examples/InfoGrid/images/ironman.jpg')}
/* end background config */

.info-grid dl {
  background-color:#EB9100;
  border:1px solid white;
  border-top:none;
  margin-left:-1px;
}

.info-grid dt {
  padding:.3em .5em;
  font-weight:normal;
  border-top:1px solid white;
}

.info-grid dt.active {color:#ff0}

.info-grid dd {
  padding:0 1em 1em;
  color:#222;
  word-wrap:break-word;
  overflow:hidden;
  font-size:13px;
}

.clear {clear:both}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*(function($) {*/

    var $infoGrid = $('#info-grid'),
        $grid = $infoGrid.find('.grid'),
        $dl = $grid.find('dl'),
        animSpeed = 500;
        
    $dl.find('dd').hide();
    
    // For `zoom-in` or `zoom-out`
    function expandGrid(ref) {
        $grid.removeClass('current').stop().animate({
            width:"17.5%",
            fontSize:"86%"
        }, animSpeed);
        $(ref).parent().addClass('current').stop().animate({
            width:"30%",
            fontSize:"100%"
        }, animSpeed);
        $grid.not('.current').find('dt').removeClass('active').stop().animate({
            fontSize:"100%"
        }, animSpeed).next().slideUp(animSpeed);
    }
    
    // For font resizing & accordion
    function toggleAccordion(ref) {
        $dl.find('dt').removeClass('active').stop().animate({
            fontSize:"100%"
        }, animSpeed).next().slideUp(animSpeed);
        if ($(ref).next().is(':hidden')) {
            $(ref).addClass('active').stop().animate({
                fontSize:"150%"
            }, animSpeed).next().slideDown(animSpeed);
            expandGrid($(ref).parent().prev());
        } else {
            /* I animate the grid width into 16% at first time, instead of 20%
               because sometimes the last grid will jump/move downward. The animations duration are different between the expanded gridand the half-collapsed grid.
            */
            $grid.removeClass('current').stop(true,true).animate({
                width:"16%",
                fontSize:"100%"
            }, animSpeed, function() {
                $(this).animate({
                    width:"20%" /* animate to 20% in callback */
                }, animSpeed);
            }).find('dt').removeClass('active').stop().animate({
                fontSize:"100%"
            }, animSpeed).next().slideUp(animSpeed);
        }
    }

    // Click anywhere outside the InfoGrid
    $(document).on("click", function() {
        if ($grid.hasClass('current')) {
            /* I animate the grid width into 16% at first time, instead of 20%
               because sometimes the last grid will jump/move downward. The animations duration are different between the expanded gridand the half-collapsed grid.
            */
            $grid.removeClass('current').stop(true,true).animate({
                width:"16%",
                fontSize:"100%"
            }, animSpeed, function() {
                $(this).animate({
                    width:"20%" /* animate to 20% in callback */
                }, animSpeed);
            }).find('dt').removeClass('active').stop().animate({
                fontSize:"100%"
            }, animSpeed).next().slideUp(animSpeed);
        }
    });

    // Click image anchor will zoom-in the grid
    $grid.find('.img-anchor').on("click", function(e) {
        e.stopPropagation();
        if (!$(this).closest('.grid').hasClass('current')) {
            expandGrid(this);
            $(this).next().find('dt:first').trigger("click"); // open the first accordion panel
            return false;
        }
    });

    $dl.find('dt').css('cursor','pointer').on("click", function(e) {
        toggleAccordion(this);
        e.stopPropagation();
    });
    
    // Initiation: expand the third grid
    $grid.eq(2).find('dt:first').trigger("click");

/*})(jQuery);*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................