Hola!
Encontré un ejemplo en donde hay un botón que muestra y oculta un div, ubicado en el margen superior, intenté modificarlo para que esto mismo se ubique en el margen inferior (bottom), pero no lo logré.
La idea es que se vea el botón sobre un footer y al hacer click se desplace hacia arriba junto con el contenido del div.
Les dejo el ejemplo, si de paso a alguien le sirve, y ojalá puedan ayudarme. Gracias!
css Código HTML:
<style type="text/css">
#top-panel{
background:#cc22ff;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(img/sub-right.png) right bottom no-repeat;
display:block;
}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
:focus{outline:0}
</style> jquery Código HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Lets make the top panel toggle based on the click of the show/hide link
$("#sub-panel").click(function(){
// Toggle the bar up
$("#top-panel").slideToggle();
// Settings
var el = $("#shText");
// Lets us know whats inside the element
var state = $("#shText").html();
// Change the state
state = (state == 'Hide' ? '<span id="shText">Mostrar</span>' : '<span id="shText">Ocultar</span>');
// Finally change whats insdide the element ID
el.replaceWith(state);
}); // end sub panel click function
}); // end on DOM
</script> Código HTML:
<div id="top-panel">
<strong>titulo</strong><br />
contenido
</div>
<div id="sub-panel"><a href="#" id="toggle"><span id="shText">Ocultar</span></a></div>