HOLA AMIGOS SOY NUEVO POR ACA Y EN JQUERy.
Necesito si pueden ayudarme con un codigo que tengo.
La idea es hacer que un boton muestre un div, y luego otro boton muestre otro div pero oculte el primero y viseversa.Para que me entiendan mejor lo grafico
<strong>boton1 boton2
div1 | div2
subdiv1 subdiv2 | subdiv3 subdiv4</strong>
ahora lo que necesito que haga, es que al precionar el boton1 muestre el div1 y si el div2 esta visible que lo oculte y viseversa, al cargar la pagina ambos divs estan ocultos. si no se pudiera hacer podria hacer visible por defecto el div1 al cargar la pagina y al precionar el boton2 deberia ocultar el div1 y mostrar el div2.
aca les dejo el codigo completo para que lo revisen
<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LISTADO DE PELICULAS CABECERA BU</title>
<!-- funcion para ocultar los div con toggle-->
<script src='
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<!-- funcion para ocultar el div de cabecera -->
<script type="text/javascript">
$(document).ready(function()
{
$("#boton").click(function () {
$('#cabecera').slideToggle(1500);
});
});
</script>
<!-- funcion para ocultar los div de los listados-->
<script type="text/javascript">
$(document).ready(function(){
$("#botontiaz").click(function () {
$("#tituloaz").each(function() {
displaying = $(this).css("display");
if(displaying == "block") {
$(this).slideToggle('2500',function() {
$(this).css("display","none");
});
} else {
$(this).slideToggle('2500',function() {
$(this).css("display","block");
$("traduccionaz").css("display","none");
});
}
});
});
});
$(document).ready(function(){
$("#botontraz").click(function () {
$("#traduccionaz").each(function() {
displaying = $(this).css("display");
if(displaying == "block") {
$(this).slideToggle('2500',function() {
$(this).css("display","none");
});
} else {
$(this).slideToggle('2500',function() {
$(this).css("display","block");
});
}
});
});
});
</script>
<!-- funcion para mostrar los div -->
<style type="text/css">
#principal {
background-color: white;
padding: 10px 5px;
border-style: solid;
border-color: GRAY;
border-width: 1px;
float: left;
width: 850px;
text-align:LEFT;
}
#titulo {
background-color: transparent;
padding: 10px 5px;
border-style: solid;
border-color: RED;
border-width: 1px;
float: left;
width: 840px;
text-align:LEFT;
}
#cabecera {
background-color: transparent;
padding: 10px 5px;
border-style: solid;
border-color: transparent;
border-width: 1px;
float: left;
width: 840px;
text-align:LEFT;
}
#listados {
background-color: transparent;
padding: 10px 5px;
border-style: solid;
border-color: ORANGE;
border-width: 1px;
float: left;
width: 840px;
text-align:LEFT;
}
#tituloaz {
display:none;
background-color: transparent;
padding: 10px 5px;
border-style: solid;
border-color: black;
border-width: 1px;
float: left;
width: 830px;
text-align:LEFT;
}
#traduccionaz {
display:none;
background-color: transparent;
padding: 10px 5px;
border-style: solid;
border-color: black;
border-width: 1px;
float: left;
width: 830px;
text-align:LEFT;
}
</style>
</head>
<body>
<div id="principal">
<div id="titulo"><p>LISTADO DE PELICULAS</p></div>
<p>CABECERA <input id="boton" align="right" value="x" type="button"></p>
<div id="cabecera">
<div style="padding: 10px 5px; border-style: solid; border-color: GRAY; border-width: 1px;float: left; width: 400px; text-align:LEFT;">
<a href="
http://www.covercaratulas.com" target=_BLANK>BUSCAR COVERS</a><br>
<a href="PLANTILLAS/BUSCAR.HTML" target=LISTADO>BUSCAR TITULOS PARA DESCARGAR</a><br>
</div>
<div style="padding: 10px 5px; border-style: solid; border-color: GREEN; border-width: 1px; margin-left:415px; width: 400px; text-align: LEFT">
<p ALIGN=justify>
<span class="style1"><font size="5"><strong>CALIFICACION</strong></font></span><br /><a name="NOMENCLATURA"></a>
<TABLE BORDER=1 CELLSPACING=1><TR>
<TD COLSPAN="1" ALIGN="CENTER" style="width: 195 px" class="style4"><strong>CATEGORIA</strong></TD>
<TD align="center" style="width: 195px" class="style4"><strong>LETRA</strong></TD><tr>
<td style="width: 235px" class="style4"><strong>EXELENTE</strong></td>
<TD align="center" style="width: 145px" class="style