Miren gente el codigo que encontre por la pagina de
jquery Código HTML:
<html>
<head>
<style media="screen" type="text/css">
#div1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
position:absolute;
width:200px;
height:56px;
z-index:2;
left: 185px;
top: 29px;
margin:5px;
float: right;
background-color:#0F0;
}
#div2 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
position:absolute;
width:200px;
height:56px;
z-index:1;
left: 358px;
top: -1px;
margin:5px;
float: right;
background-color:#F00;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table width="18%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><input type="button" value="boton 1"/> </td>
<td width="80%">
<script>
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx)
$("input").click(function(){
$("div").toggle("slow");
});
</script>
<div id="div1">Aca va contenido 1</div></td>
</tr>
<tr>
<td> <input type="button" value="boton 2"/></td>
<td>
<script>
//efecto de transicion del modo de ocultacion/aapricion
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx)
$("input").click(function(){
$("span").toggle("slow");
});
</script>
<span id="div2">Aca va contenido 2</span></td>
</tr>
</table>
</body>
</html> las capas div y el css lo hice yo para que quede mas lindo; pero cierra los dos a la vez o si se preciona boton dos y luego boton 1 se pone fiera la cosa aca esta la pagina de prueba:
EJEMPLO, miren como queda pero no hace casi el 25% que me falta, como lo arreglo, para que al presionar el boton 2, me esconda div1 y me muestre div2 y al precionar boton 1 me esconda div2 y me muestre div 1, y asi sucesivamente.