Push Down Example

Ignore the HTML and CSS sections, look at the JS section. Clicking on the unit toggles expanding or collapsing, unless you click on a link.

by mrcoles

HTML

<body class="sz1200 stdln en">
	<div class="header">
        <a class="gh-hdn" href="#mainContent">Skip to main content</a><div id=gh class="gh-w gh-simpleH gh-site-0"><table class=gh-tbl><tr><td class=gh-td><h1 id=gh-l-h1><a id="gh-la" _sp="m570.l2586" class="iclg" href="http://www.ebay.com">eBay<img border=0 width=117 height=92 id=gh-logo src="http://p.ebaystatic.com/aw/pics/globalheader/spr6.png" alt="" style="clip:rect(43px, 118px, 93px, 0px); position:absolute; top:-44px;left:0"></a></h1></td><td class=gh-td><div id=gh-shop><a id="gh-shop-a" href="http://www.ebay.com/sch/allcategories/all-categories?_trksid=m570.l3694">Shop by<br>category<i id=gh-shop-ei></i></a></div></td><td class=gh-td-s><form action="http://www.ebay.com/sch/i.html" method=get id=gh-f><input type=hidden value=m570.l3201 name=_trksid><table class=gh-tbl2><tr><td class=gh-td-s><div id=gh-ac-box><div id=gh-ac-box2><label class="gh-hdn g-hdn" for="gh-ac">Enter your search keyword</label><input autocomplete=off name=_nkw id=gh-ac placeholder="Search... " maxlength=300 size=50 class=gh-tb type=text autofocus></div></div></td><td class=gh-td id=gh-cat-td><div id="gh-cat-box"><select name=_sacat id=gh-cat size=1 class=gh-sb title="Select a category for search"><option value="0" selected="selected">All Categories </option></select></div></td> <td class=gh-td><input value="Search" id=gh-btn class="btn btn-prim" type=submit /></td><td class=gh-td><div id=gh-as><a title="Advanced Search" id="gh-as-a" _sp="m570.l2614" class="thrd" href="http://www.ebay.com/sch/ebayadvsearch/?rt=nc">Advanced</a></div></td> </tr></table></form></td></tr></table><div id=gh-top><ul id=gh-topl><li id=gh-eb-u class=gh-t></li><li class=gh-t><a _sp="m570.l3188" class="gh-p" href="http://deals.ebay.com/">Daily Deals</a></li><li id=gh-ti><a href="http://ad.doubleclick.net/clk;270265016;96087365;m;pc=[TPAS_ID]" _sp=m570.l2611 id=gh-doodleS><img alt="T-Mobile - Get the latest smartphones for less up front than the other guys"...

CSS

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}caption{text-align:left;font-weight:normal;float:none!important}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}blockquote{margin:1.5em;color:#555;font-style:italic;font-family:serif}ul,ol{margin:0 1.5em 1.5em 0;padding-left:1.5em}li ul,li ol{margin:0}dl{margin:0 0 1.5em 0}dl dt{font-weight:bold}dd{margin-left:1.5em}ins{color:#000;background-color:#ff9;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration;line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}a img{border:0 none}strong{font-weight:bold}body{font-size:13px;color:#333;background-color:#fff;font-family:Arial,Sans-Serif,Verdana}h1,h2,h3,h4,h5,h6{font-weight:normal}h1{font-size:1.846em;line-height:1.95em;margin-bottom:.5em;font-family:Trebuchet MS,Arial,Serif}h2{font-size:1.538em;line-height:1.70em;margin-bottom:.75em;font-family:Trebuchet MS,Arial,Serif}h3{font-size:1.385em;line-height:1;margin-bottom:1em;font-family:Trebuchet MS,Arial,Serif}h4{font-size:1.231em;line-height:1.25;margin-bottom:1.25em}h5{font-size:1.154em;line-height:1.17em;margin-bottom:1.5em}h6{font-size:1em}h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}p{margin:0 0 1em}p .left{margin:1.5em 1.5em 1.5em 0;padding:0}p...

JavaScript

var $ = jQuery;
(function() {
    var startingHeight = 40,
        $gbh = $('#gh-gb').css('top', startingHeight); // change height of global header background manually
    $('<div>', {
        html: '<h1>Hi</h1><p>How are you? <a href="http://www.ebay.com/clp/31388" target="_blank">View site</a></p>',
        css: {height: startingHeight, overflow: 'hidden', background: 'yellow'},
        click: function(e) {
            if ($(e.target).closest('a').size()==0) {
                var $this = $(this),
                    expanded = $this.hasClass('expanded'),
                    height = 100,
                    delay = 1000;
                $gbh.stop(true, true).animate({
                    top: expanded ? startingHeight : height
                }, delay); // deal with global header background separately :'(
                $this.stop(true, true).animate({
                    height: $this.hasClass('expanded') ? startingHeight : height
                }, delay).toggleClass('expanded');
            }
        }
    }).prependTo('body');
})(jQuery);