Footer Toggle Content jquery

Footer Toggle Content jquery


Download

<style type="text/css">
body   {
   font-size:72%;
   font-family:Arial, Helvetica, sans-serif;
   line-height:1.9em;
   color:#434343;
   background:#FCFCFC;
   }
a:hover   {
   text-decoration:none;
   color:#7B7B7F;
   }
h3    {
   font:2em Arial, Verdana, Helvetica, sans-serif;
   color:#2A313A;
   padding-bottom:20px;
   }
ul, ol   {
   margin:0;
   padding:0 0 20px;
   }
  
ul    {list-style:none;}
  
ul li   {
   margin:0;
   padding:5px 0 5px 21px;
   color:#434343;
   background:url(images/arr.gif) 0 9px no-repeat;
   }
  
ul li a   {
   color:#434343;
   text-decoration:none;
   }

ol li   {
   margin:0 0 0 2em;
   padding:0;
   color:#434343;
   }
.wrap   {
   width:1000px;
   position:relative;
   margin:0 auto;
   z-index:300;
   }
.clear   {clear:both; height:0px;}
#footer_button {
   width: 121px;
   height:22px;
   margin-right:34px;
   float:right;
   cursor: pointer;
   background:url(images/more_info.png) 0 0 no-repeat;
   }

#footer_higher {
   width:100%;
   background: #293139;
   position:relative;
   z-index:100;
   }

#footer_higher #footer_content {
   width: 932px;
   margin: 0 auto;
   display: none;
   }

#footer_higher #footer_content .footbox1 {
   float: left;
   width: 265px;
   margin: 20px 0 30px;
   }
  
#footer_higher #footer_content .footbox2 {
   float: left;
   width: 130px;
   margin: 20px 0 30px 50px;
   }
  
#footer_higher #footer_content .footbox3 {
   float: right;
   width: 260px;
   margin: 20px 0 30px;
   }
  
#footer_higher h3 {
   color:#ffffff;
   font-size:1.5em;
   padding-bottom:5px;
   }
  
#footer_higher .title {
   width:100%;
   position:relative;
   margin-bottom:15px;
   border-bottom:1px solid #191E23;
   }
  
#footer_higher .title:after {
   width:100%;
   content: '';
   position: absolute;
   border-bottom:1px solid #39444F;
   bottom:-2px;
   }
  
#footer_higher li {
   margin:0;
   padding:5px 0;
   background:none;
   border-bottom:1px solid #0D1012;
   }
  
#footer_higher #footer_content .footbox1 li {
   padding-left:20px;
   background:url(images/foot_arr.gif) 0 8px no-repeat;
   }
  
#footer_higher a {
   color:#9A9B9D;
   text-decoration:none;
   }
  
#footer_higher a:hover {
   color:#ffffff;
   text-decoration:none;
   }
  
#FootContact p {margin-bottom:3px; clear:both;}

#FootContact p label {
   width:45px;
   padding-right:5px;
   font-size:0.9em;
   padding-top:2px;
   text-transform:uppercase;
   float:left;
   color:#96999C;
   }

#FootContact input[type=text],
#FootContact textarea {
   padding:3px;
   font:0.95em/0.9em Arial, Helvetica, sans-serif;
   color:#96999C;
   background:#1B2025;
   border-top:1px solid #0D1012;
   border-left:1px solid #0D1012;
   border-bottom:1px solid #394550;
   border-right:1px solid #394550;
   }
  
#FootContact input[type=text] {
   width:199px;
   height:15px;
   }
  
#FootContact input[type=text]:hover,
#FootContact textarea:hover {background:#293139;}
#FootContact input[type=text]:focus,
#FootContact textarea:focus {background:#444A50;}
  
#FootContact input[type=submit] {
   border:1px solid #1A1F24;
   box-shadow:1px 2px 2px #1A1F24;
   -moz-box-shadow:1px 2px 2px #1A1F24;
   -webkit-box-shadow:1px 2px 2px #1A1F24;
   box-shadow:1px 2px 2px #1A1F24;
   text-transform:uppercase;
   background: #444A50;
   }

#FootContact textarea  {
   width:249px;
   height:95px;
   overflow:hidden;
   }

#footer_lower {
   border-top:6px solid #14181B;
   width: 100%;
   color: #434343;
   padding: 25px 0px;
   position:relative;
   z-index:200;
   background:#fff;
   }
  
#footer_lower .valid {
   display:block;
   font-size:0.95em;
   color: #A1A1A1;
   }

#footer_lower #footer_info {
   width: 932px;
   margin: 0 auto;
   }

#footer_lower #copyright {
   width: 610px;
   float: left;
   text-align:left;
   }

#footer_lower #attr {
   width: 300px;
   padding-top:10px;
   float: right;
   font-size:1.3em;
   text-align:right;
   color:#A1A1A1;
   }
  
#footer_lower #attr b {font-weight:normal;}
  
#attr ul  {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   }
  
#attr ul li  {
   margin:0;
   padding:0 3px 0 0;
   float:left;
   background:none;
   }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 jQuery(function($) {
  var slide = false;
  var height = $('#footer_content').height();
  $('#footer_button').click(function() {
   var docHeight = $(document).height();
   var windowHeight = $(window).height();
   var scrollPos = docHeight - windowHeight + height;
   $('#footer_content').animate({ height: "toggle"}, 1000);
   if(slide == false) {
    if($.browser.opera) {
     $('html').animate({scrollTop: scrollPos+'px'}, 1000);
    } else {
     $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
    }
    slide = true;
   } else {
    slide = false;
   }
  });
 });
</script>

<div style="height:900px;"></div>
<div class="wrap">
 <div id="footer_button"></div>
 <div class="clear"></div>
</div>
<div id="footer_higher">
 <div id="footer_content">
  <div class="footbox1">
   <div class="title"><h3>Recent News</h3></div>
   <ul>
    <li><a href="#" title="Donec accumsan lorem ipsum dolor...">Donec accumsan malesuada orcidonec sitmet eros lorem ipsum dolor...</a></li>
    <li><a href="#" title="Amet incon ecteetra magna donec accumsan...">Amet incon ectetuer adipiscing maurse pharetra magna donec accumsan...</a></li>
    <li><a href="#" title="Malesuada orcdo nsec tetuer malesuada...">Malesuada orcdonec umet lorem ipsum dolorconsec tetuer malesuada...</a></li>
   </ul>
  </div>
  <div class="footbox2">
   <div class="title"><h3>Archives</h3></div>
   <ul>
    <li><a href="#" title="June, 2010">June, 2010</a></li>
    <li><a href="#" title="May, 2010">May, 2010</a></li>
    <li><a href="#" title="April, 2010">April, 2010</a></li>
    <li><a href="#" title="March, 2010">March, 2010</a></li>
    <li><a href="#" title="February, 2010">February, 2010</a></li>
    <li><a href="#" title="January, 2010">January, 2010</a></li>
   </ul>
  </div>
  <div class="footbox2">
   <div class="title"><h3>Categories</h3></div>
   <ul>
    <li><a href="#" title="Advertising">Advertising</a></li>
    <li><a href="#" title="News">News</a></li>
    <li><a href="#" title="Web Design">Web Design</a></li>
   </ul>
  </div>
 
  <div class="footbox3">
   <div class="title"><h3>Email Us</h3></div>
   <form action="" id="FootContact">
    <p><label for="fname">Name:</label><input type="text" id="fname" /></p>
    <p><label for="femail">E-mail:</label><input type="text" id="femail" /></p>
    <p><textarea cols="5" rows="3"></textarea></p>
    <p><input type="submit" value="Submit" title="Submit" /></p>
   </form>
  </div>
  <div class="clear"></div>
 </div>
</div>
<div id="footer_lower">
 <div id="footer_info">
  <div id="copyright">
   Copyright © 2012  •  r-ednalan.blogspot.com  •  All rights reserved
   <span class="valid">http://r-ednalan.blogspot.com/</span>
  </div>
  <div id="attr">
   <ul>
    <li><b>Stay Connected</b></li>
   </ul>
  </div>
  <div class="clear"></div>
 </div>
</div>