¿Efecto Toggle al revés?

Hola, por lo que he compreendido creo que lo que quieres es algo parecido a esto.

@charset "utf-8"; /*use esto si declaras la css desde un .css*/

<style>
#footer {
float:left;
clear:both;
width:100%;
background-image:url(../img/bg.png);
position:fixed;
bottom:0px;
border-top-color:#555555;
border-top-style:solid;
border-top-width:1px;
z-index:9999;
}

#footer-wrapper {
display: none; /*none default close*/
width:960px;
margin:0 auto;
position:relative;
clear:both;
}

#footer-widget {
font:18px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333;
text-shadow:#666 1px 1px;
max-height:220px;
width:220px;
padding:0px 10px 28px;
float:left;
}

/*openclose button*/

#openclose {
background-image: url(larutadetuimagen);
background-position:-18px 0px;
width:18px;
height:18px;
margin:10px;
text-indent:-9999px;
float:right;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0px 0px 1px #f9f9f9;
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
box-shadow:0px 0px 1px #f9f9f9;
}

/*#openclose:hover {
background-position:0px 0px;
width:18px;
height:18px;
}*/

#openclose.active {
background-position:-18px -18px;
width:18px;
height:18px;
}

/*#open.active:hover {
background-position:0px -18px;
width:18px;
height:18px;
}*/

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><!-- use esta version como minimo -->

<script type="text/javascript" src="laruta+elnombredetuarchivo.js"></script><!--use esto si declaras el script desde un .js*-->

<script>

$(document).ready(function(){

$("#openclose").click(function(){
$(this).toggleClass("active").next().slideToggle( 800 );
return false; //Prevent the browser jump to the link anchor
});

});

</script><!--use esto al final o desde un .js-->

<!-- abajo pego el codigo html-->

<div id="footer">

<a href="#" id="openclose">button</a>

<div id="footer-wrapper">

<div id="footer-widget">
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div><!-- end of footer-widget -->

<div id="footer-widget">
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div><!-- end of footer-widget -->

<div id="footer-widget">
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div><!-- end of footer-widget -->

<div id="footer-widget">
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</div><!-- end of footer-widget -->

</div><!-- end of footer-wrapper -->

</div><!-- end of footer -->

ten en cuenta que no puedes envolver el header el wrapper y el footer en un mismo contenedor, tendras que poner por separado, jugando con position: relative y margin:0 auto; respectivamente.

Te añado la imagen http://www.megaupload.com/?d=AAJ9JHXL como ejemplo para que puedas probar haciendo sprite.

el script lo cree en su dia para hacer un trabajo y es crossbrowser, no hace falta poner creditos ni nada parecido.

Las css son un ejemplo, las tendras que adaptarlas a tu codigo, pero pueden ser reaprovechadas, en vez de los ID, los puedes cambiar por clases, un saludo y espero que te sea util!

Genial!!!!!
Me muero de ganas de probarlo!!!!
Muchas Gracias, ya te contaré!!!!