CodePen

HTML

            
              <head>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />


<body>



<br><br>


<div class="main">

	<div id="page-wrap">
		
		<div class="info-col">
		
    		<h2><b>Category 1</b></h2>
    		
    		<a class="image download" href="#" target="_new">View Image</a>
    		
    		<dl>
    		  <dt style="background: #000078;"><font color="#d1d132">Header</font></dt>
    		  <dd style="background: #000078;">
              Content Here
         </dd>
         
    		  <dt style="background: #000082;"><font color="#d1d132">Header</font></dt>
    		  <dd style="background: #000082;">
              Content Here
         </dd>
    		  <dt style="background: #00008C;"><font color="#d1d132">Header</font></dt>
    		  <dd style="background: #00008C;">
              Content Here
              
         </dd>
    		  <dt style="background: #000096;"><font color="#d1d132">Header</font></dt>
    		  <dd style="background: #000096;">
              Content Here
              
         </dd>
    		  <dt style="background: #0000A0;"><font color="#d1d132">Header</font></dt>
    		  <dd style="background: #0000A0;">
    		      Content Here
              
              
         </dd>
    		  <dt style="background: #0A0AAA;"><font color="#d1d132">Header</font></dt>
    	    <dd style="background: #0A0AAA;">
              Content Here
              
         </dd>
        		  <dt style="background: #1414B4;"><font color="#d1d132">Header</font></dt>
    		      <dd style="background: #1414B4;">
              Content Here
              
         </dd>
    
        		  <dt style="background: #1E1EBE;"><font color="#d1d132">Header</font></dt>
    		      <dd style="background: #1E1EBE;">
              Content Here
              
         </dd>
    
        		  <dt style="background: #2828C8;"><font color="#d1d132">Header</font></dt>
    		     	<dd style="background: #2828C8;">
              Content Here
              
         </dd>
    
        		  <dt style="background: #3232D2;"><font color="#d1d132">Header</font></dt>
    		     	<dd style="background: #3232D2;">
              Content Here
              
         </dd>
        		  <dt style="background: #4646E6;"><font color="#d1d132">Header</font></dt>
    		      <dd style="background: #4646E6;">
              Content Here
              
         </dd>   
    		</dl>
		
		</div>
		
        <div class="info-col">
        
        	<h2><b>Category 2</b></h2>
        	
        	<a class="image install" href="#" target="_new">View Image</a>
        	
     		<dl>
    		  <dt style="background: #D77D00;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #D77D00;">Content Here
         </dd>
         
    		  <dt style="background: #E18700;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #E18700;">Content Here
         </dd>
    		  <dt style="background: #EB9100;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #EB9100;">Content Here
              
         </dd>
    		  <dt style="background: #F59B00;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #F59B00;">Content Here
              
         </dd>
    		  <dt style="background: #FFA500;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFA500;">
    		 
              Content Here
              
              
         </dd>
    		  <dt style="background: #FFAF0A;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFAF0A;">
    		                   Content Here
              
              
         </dd>
        		  <dt style="background: #FFB914;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFB914;">Content Here</dd>
    
        		  <dt style="background: #FFC31E;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFC31E;">Content Here</dd>
    
        		  <dt style="background: #FFCD28;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFCD28;">Content Here</dd>
    
        		  <dt style="background: #FFD732;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFD732;">Content Here</dd>
        		  <dt style="background: #FFEB46;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFEB46;">Content Here</dd>    
    		</dl>
		
		</div>
		
		<div class="info-col">
		
    		<h2><b>Category 3</b></h2>
    		<dl>
    		  
    		  
            <a class="image rma" href="#" target="_new">View Image</a>
    		
          <dt style="background: #241E1E;">Header</font></dt>
    		  <dd style="background: #241E1E;">Stuff Goes Here</dd>
    		  <dt style="background: #2E2828;">Header</dt>
    		  <dd style="background: #2E2828;">More Stuff Here</dd>
    		  <dt style="background: #383232;">Header</dt>
    		  <dd style="background: #383232;">Stuff!</dd>
    		  <dt style="background: #423C3C;">Header</dt>
    		  <dd style="background: #423C3C;">Yet More Stuff!</dd>
    		  <dt style="background: #4C4646;">Header</dt>
    		  <dd style="background: #4C4646;">STUUUUUFF!!</dd>
    
    		
		
<dt style="background: #605A5A;">&nbsp;</dt>
<dt style="background: #6A6464;">&nbsp;</dt>
<dt style="background: #746E6E;">&nbsp;</dt>
<dt style="background: #7E7878;">&nbsp;</dt>
<dt style="background: #928C8C;">&nbsp;</dt>
<dt style="background: #928C8C;">&nbsp;</dt>

</dl>
		</div>
		
		<div class="info-col">
		
    		<h2><b>Another Category</b></h2>
    		
            <a class="image kb" href="#" target="_new">View Image</a>
    		
    		<dl>
    		  <dt style="background: #D77D00;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #D77D00;">Content Here
         </dd>
         
    		  <dt style="background: #E18700;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #E18700;">Content Here
         </dd>
    		  <dt style="background: #EB9100;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #EB9100;">Content Here
              
         </dd>
    		  <dt style="background: #F59B00;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #F59B00;">Content Here
              
         </dd>
    		  <dt style="background: #FFA500;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFA500;">
    		   
              Content Here
              
              
         </dd>
    		  <dt style="background: #FFAF0A;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFAF0A;">
    		                   Content Here
              
              
         </dd>
        		  <dt style="background: #FFB914;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFB914;">Content Here</dd>
    
        		  <dt style="background: #FFC31E;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFC31E;">Content Here</dd>
    
        		  <dt style="background: #FFCD28;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFCD28;">Content Here</dd>
    
        		  <dt style="background: #FFD732;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFD732;">Content Here</dd>
        		  <dt style="background: #FFEB46;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFEB46;">Content Here</dd>    
    		</dl>
		
		</div>
		
		<div class="info-col">
		
    		<h2><b>Last Category</b></h2>
    		
            <a class="image other" href="#">View Image</a>
    		
    		    		<dl>
    		  <dt style="background: #D77D00;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #D77D00;">Content Here
         </dd>
         
    		  <dt style="background: #E18700;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #E18700;">Content Here
         </dd>
    		  <dt style="background: #EB9100;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #EB9100;">Content Here
              
         </dd>
    		  <dt style="background: #F59B00;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #F59B00;">Content Here
              
         </dd>
    		  <dt style="background: #FFA500;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFA500;">
    		    
              Content Here
              
              
         </dd>
    		  <dt style="background: #FFAF0A;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFAF0A;">
    		                   Content Here
              
              
         </dd>
        		  <dt style="background: #FFB914;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFB914;">Content Here</dd>
    
        		  <dt style="background: #FFC31E;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFC31E;">Content Here</dd>
    
        		  <dt style="background: #FFCD28;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFCD28;">Content Here</dd>
    
        		  <dt style="background: #FFD732;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFD732;">Content Here</dd>
        		  <dt style="background: #FFEB46;"><font color="#0059ff">Header</font></dt>
    		  <dd style="background: #FFEB46;">Content Here</dd>    
    		</dl>
		
		</div>
</div>	


</body>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: auto; background: #eee; }
body { font: 14px Georgia, serif; }
#page-wrap {  padding: 0 0 0 15px; margin: 0 auto; overflow: auto;  }

.info-col { font-size: 12px; float: left; width: 182px; height: 100%; padding: 25px 0 0 0; }
.info-col h2 { font-size: 14px;text-align: center; font-weight: normal; padding: 5px 0;white-space:nowrap; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.download { background: url(../images/gridimages/download.png) center center no-repeat; }
.install { background: url(../images/gridimages/install.png) center center no-repeat; }
.rma { background: url(../images/gridimages/rma.png) center center no-repeat; }
.kb { background: url(../images/gridimages/kb.png) center center no-repeat; }
.other { background: url(../images/gridimages/guardian.png) center center no-repeat; }


dt { padding: 5px; background:  #0066a4; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background:  #0066a4; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #3562b4; }
dd:nth-of-type(1) { background: #3562b4; }

dt:nth-of-type(2) { background: #668B8B; }
dd:nth-of-type(2) { background: #668B8B; }

dt:nth-of-type(3) { background: #42426F; }
dd:nth-of-type(3) { background: #42426F; }

dt:nth-of-type(4) { background: #11203b; }
dd:nth-of-type(4) { background: #11203b; }

dt:nth-of-type(5) { background: #0147FA; }
dd:nth-of-type(5) { background: #0147FA; }

dt:nth-of-type(6) { background: #236b79; }
dd:nth-of-type(6) { background: #236b79; }

dt:nth-of-type(7) { background: #47b6ca; }
dd:nth-of-type(7) { background: #47b6ca; }

dt:nth-of-type(8) { background: #283A90; }
dd:nth-of-type(8) { background: #283A90; }

dt:nth-of-type(9) { background: #05B8CC; }
dd:nth-of-type(9) { background: #05B8CC; }

dt:nth-of-type(10) { background: #4973AB; }
dd:nth-of-type(10) { background: #4973AB; }

dt:nth-of-type(11) { background: #607B8B; }
dd:nth-of-type(11) { background: #607B8B; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }





.main a:link {
COLOR: #FFFFFF;
text-decoration:underline;
}
.main a:visited {
COLOR: #FFFFFF;
text-decoration:underline;
}
.main a:hover {
COLOR: #FFFFFF;
text-decoration:underline;
}
.main a:active {
COLOR: #FFFFFF;
text-decoration:underline;
}




#container{
    width:300px;
    height:300px;
    border:1px solid #000; 
    overflow:hidden;
    margin:auto;
}
#container iframe {
    width:900px;
    height:620px;
    margin-left:-250px;
    margin-top:-350px;   
    border:0 solid;
 }






            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function () {

    // Set up variables
    var $el, $parentWrap, $otherWrap,
    $allTitles = $("dt").css({
        padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
        "cursor": "pointer" // make it seem clickable
    }),
        $allCells = $("dd").css({
            position: "relative",
            top: -1,
            left: 0,
            display: "none" // info cells are just kicked off the page with CSS (for accessibility)
        });

    // clicking image of inactive column just opens column, doesn't go to link   
    $("#page-wrap").delegate("a.image", "click", function (e) {

        if (!$(this).parent().hasClass("curCol")) {
            e.preventDefault();
            $(this).next().find('dt:first').click();
        }

    });


    // clicking on titles does stuff
    $("#page-wrap").delegate("dt", "click", function (e) {

        e.stopPropagation(); // USE STOP PROPAGATION

        // cache this, as always, is good form
        $el = $(this);

        // if this is already the active cell, don't do anything
        if (!$el.hasClass("current")) {

            $parentWrap = $el.parent().parent();
            $otherWraps = $(".info-col").not($parentWrap);

            // remove current cell from selection of all cells
            $allTitles = $("dt").not(this);

            // close all info cells
            $allCells.slideUp();

            // return all titles (except current one) to normal size
            $allTitles.stop().animate({
                fontSize: "10px",
                paddingTop: 4,
                paddingRight: 4,
                paddingBottom: 4,
                paddingLeft: 4
            });

            // animate current title to larger size            
            $el.stop().animate({
                "font-size": "20px",
                paddingTop: 10,
                paddingRight: 5,
                paddingBottom: 0,
                paddingLeft: 10
            }).next().slideDown();

            // make the current column the large size
            $parentWrap.stop().animate({
                width: 320
            }).addClass("curCol");

            // make other columns the small size
            $otherWraps.stop().animate({
                width: 140
            }).removeClass("curCol");

            // make sure the correct column is current
            $allTitles.removeClass("current");
            $el.addClass("current");

        }

    });

    // Click anywhere outside the Infogrid
    $(document).click(function () {

        // return all titles to normal size
        $allTitles.stop().animate({
            fontSize: "10px",
            paddingTop: 4,
            paddingRight: 4,
            paddingBottom: 4,
            paddingLeft: 4
        }).removeClass("current");

        // close all info cells
        $allCells.slideUp();

        // make all columns the small size
        $parentWrap.stop().animate({
            width: 140
        }).removeClass("curCol");

    });


});


$('button').click(function () {
    $('button').removeClass('active'); // prevent conflicts
    $(this).addClass('active');
    var revertButton = function () {
        $('.active').removeClass("active");
        $('.install').trigger('click');
    };
    setTimeout(revertButton, 5000);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................