Bueno, aquí estoy otra vez... Últimamente doy tela de trabajo ^^Uu...
A ver, tengo un menú que se imprime en php. Los datos del menú son sacados de una base de datos MySQL. Se cargan secciones y subsecciones dentro de cada sección... El problema es que quiero que al hacer click en el nombre de cada sección, se oculte o se muestre la subsección. Hasta ahora he conseguido hacerlo usando la propiedad innerHTML desde javascript, pero el contenido de las subsecciones lo establecía desde una variable en javascript, así que de cargar los datos de la base de datos, nada de nada....
Tengo algo así:
Código:
function Submenus (opcion, seccion)
{
var cadena = "";
if (opcion == "mostrar")
{
cadena = "subsecciones";
document.getElementById(seccion).innerHTML = cadena;
}
else
{
document.getElementById(seccion).innerHTML = cadena;
}
}
La celda donde se carga la cadena (porque ahora mismo lo cargo en una celda, no en un div), tiene puesto por defecto el height a 0, y cuando imprimo contenido dentro de ella, se ensancha, y da el pego...
Lo que yo kiero que "cadena" sea el contenido de la base de datos, y no una simple variable definida desde el propio script, así que había pensado cargar el contenido de las secciones en divs, y ponerlos ocultos o con height 0 y luego volverlos visibles o que se adapte el height al contenido del div...
He estado probando esto, pero no me funciona muy bien...
Código HTML:
<html>
<head>
<style>
.estilo1 {
width: 0px; height: 0px; overflow: hidden;
}
.estilo2 {
width: 0px; height: 0px; overflow: visible;
}
</style>
<script>
function capa()
{
var estilo = document.getElementById("capa").className;
if (estilo == "estilo1")
{
document.getElementById("capa").className = "estilo2";
}
else
{
document.getElementById("capa").className = "estilo1";
}
}
</script>
</head>
<body>
<div id="capa" class="estilo1">
hola
<br />
adios
<br />
hello
<br />
bye
</div>
<input type="button" name="boton" id="boton" value="CLICK" onClick="capa()" />
</body>
</html> Alguna sugerencia? :S