JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
CSS
div#bannerholder {
top: 0;
}
div#logo {
margin: 0 auto;
position: relative;
width: auto;
}
div#banner {
height: 115px;
margin: 0 auto;
overflow: hidden;
padding: 3px 0 0 5px;
position: relative;
text-align: center;
width: auto;
}
#logo img { border: none; margin: 0 auto; text-align: center;}
#closebanner, #linkout, #openbanner {cursor: pointer !important; z-index: 10;}
JavaScript
jQuery.noConflict();
// Set background color of banner and url
var bannerColor = '#123';
var url = 'http://www.example.com';
jQuery(document).ready(function($) {
// Place the container for the banner directly after the body tag
$("body *:first").before('<div id="bannerholder"></div>');
var htmlString = "<div id='banner' style='background-color:" +bannerColor+ ";'><div id='logo'></div></div>";
var openedBannerString = '<img id="openedbannerimg" src="http://f.cl.ly/items/a236eb663314edcd4756/banner_open.gif" usemap="#openedbannermap" /><map name="openedbannermap" id="openedbannermap"><area id="linkout" shape="rect" coords="436,71,649,93" target="_blank" /><area id="closebanner" shape="rect" coords="602,10,706,31" /></map>';
var closedBannerString = '<img id="closedbannerimg" src="http://f.cl.ly/items/767e8dc793c9bfb3c907/banner_closed.gif" usemap="#closedbannermap" /><map name="closedbannermap" id="closedbannermap"><area id="openbanner" shape="rect" coords="654,10,748,27" /></map>';
$('#bannerholder').html(htmlString);
var $logo = $('#logo'), $banner = $('#banner'); // caching
$($logo).html(openedBannerString);
$('#linkout').attr('href',url);
$($banner).delegate('#closebanner, #openbanner','click',function(e) {
if (e.target.id === 'closebanner') {
$($banner).stop(true,true).animate({height:"34px"},{duration:700,easing:"easeOutSine"});
$($logo).html(closedBannerString);
}
if (e.target.id === 'openbanner') {
$($banner).stop(true,true).animate({height:"115px"},{duration:700,easing:"easeOutSine"});
$($logo).html(openedBannerString);
$('#linkout').attr('href',url); // need to add the url again
}
});
/*
$($banner).delegate('#closebanner','click',function() {
$($banner).stop(true,true).animate({height:"34px"},{duration:700,easing:"easeOutSine"});
$($logo).html(closedBannerString);
...