Tengo que hacer mi ultimo trabajo para mi curso de Javascript y me piden que haga esto:
Al cargar la pagina se debe ver asi:
TITULO 1
expandir contenido
TITULO 2
expandir contenido
Cuano alguien haga click sobre "expandir contenido" se debe ver asi:
TITULO 1
LINK 1
LINK 2
LINK 3
LINK 4
LINK 5
esconder contenido
TITULO 2
expandir contenido
lo que tengo como codigo es esto:
Xhtml:
Código:
y un css:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Links</title>
<script type = "text/javascript" src = "addLoadEvent.js"></script>
<script type = "text/javascript" src = "expandlist.js"></script>
<link rel="stylesheet" type="text/css" href="expandlist.css"/>
</head>
<body>
<div id = "container">
<!-- den första uppsättningen länkar -->
<div class = "visible">
<h2>Dagens nyheter</h2>
<ul>
<li><a href = "#">Länk 1 a</a></li>
<li><a href = "#">Länk 1 b</a></li>
<li><a href = "#">Länk 1 c</a></li>
<li><a href = "#">Länk 1 d</a></li>
<li><a href = "#">Länk 1 e</a></li>
<li><a href = "#">Länk 1 f</a></li>
<li><a href = "#">Länk 1 g</a></li>
<li><a href = "#">Länk 1 h</a></li>
<li><a href = "#">Länk 1 i</a></li>
<li><a href = "#">Länk 1 j</a></li>
<li><a href = "#">Länk 1 k</a></li>
<li><a href = "#">Länk 1 l</a></li>
<li><a href = "#">Länk 1 m</a></li>
<li><a href = "#">Länk 1 n</a></li>
<li><a href = "#">Länk 1 o</a></li>
<li><a href = "#">Länk 1 p</a></li>
<li><a href = "#">Länk 1 q</a></li>
<li><a href = "#">Länk 1 r</a></li>
<li><a href = "#">Länk 1 s</a></li>
<li><a href = "#">Länk 1 t</a></li>
<li><a href = "#">Länk 1 u</a></li>
<li><a href = "#">Länk 1 v</a></li>
<li><a href = "#">Länk 1 x</a></li>
<li><a href = "#">Länk 1 y</a></li>
<li><a href = "#">Länk 1 z</a></li>
<li><a href = "#">Länk 1 å</a></li>
<li><a href = "#">Länk 1 ö</a></li>
</ul>
</div> <!-- slut på div #links_1 -->
<!-- den första uppsättningen länkar -->
<div class = "visible">
<h2>Gårdagens nyheter</h2>
<ul>
<li><a href = "#">Länk 2 a</a></li>
<li><a href = "#">Länk 2 b</a></li>
<li><a href = "#">Länk 2 c</a></li>
<li><a href = "#">Länk 2 d</a></li>
<li><a href = "#">Länk 2 e</a></li>
<li><a href = "#">Länk 2 f</a></li>
<li><a href = "#">Länk 2 g</a></li>
<li><a href = "#">Länk 2 h</a></li>
<li><a href = "#">Länk 2 i</a></li>
</ul>
</div> <!-- slut på div #links_1 -->
<!-- den tredje uppsättningen länkar -->
<div class = "visible">
<h2>Ännu äldre nyheter</h2>
<ul>
<li><a href = "#">Länk 3 a</a></li>
<li><a href = "#">Länk 3 b</a></li>
<li><a href = "#">Länk 3 c</a></li>
<li><a href = "#">Länk 3 d</a></li>
<li><a href = "#">Länk 3 e</a></li>
<li><a href = "#">Länk 3 f</a></li>
<li><a href = "#">Länk 3 g</a></li>
<li><a href = "#">Länk 3 h</a></li>
<li><a href = "#">Länk 3 i</a></li>
<li><a href = "#">Länk 3 j</a></li>
<li><a href = "#">Länk 3 k</a></li>
<li><a href = "#">Länk 3 l</a></li>
<li><a href = "#">Länk 3 m</a></li>
<li><a href = "#">Länk 3 n</a></li>
<li><a href = "#">Länk 3 o</a></li>
<li><a href = "#">Länk 3 p</a></li>
<li><a href = "#">Länk 3 q</a></li>
<li><a href = "#">Länk 3 r</a></li>
<li><a href = "#">Länk 3 s</a></li>
<li><a href = "#">Länk 3 t</a></li>
<li><a href = "#">Länk 3 u</a></li>
<li><a href = "#">Länk 3 v</a></li>
<li><a href = "#">Länk 3 w</a></li>
<li><a href = "#">Länk 3 x</a></li>
<li><a href = "#">Länk 3 y</a></li>
<li><a href = "#">Länk 3 z</a></li>
<li><a href = "#">Länk 3 å</a></li>
<li><a href = "#">Länk 3 ä</a></li>
<li><a href = "#">Länk 3 ö</a></li>
</ul>
</div> <!-- slut på div -->
<!-- den fjärde uppsättningen länkar -->
<div class = "visible">
<h2>Ännu mycket äldre nyheter</h2>
<ul>
<li><a href = "#">Länk 4 a</a></li>
</ul>
</div> <!-- slut på div -->
</div> <!-- slut på div #container -->
</body>
</html>
Código:
He estado buscando por internet algun manual, ejemplo o algo pero hasta ahora he encontrado el mismo tipo de menu utilizando <form> lo cual no me sirve.body
{
background-color: white;
color: grey;
font-family: "Gill Sans", Verdana, Helvetica, Arial, sans-serif;
margin: 5em;
}
#container
{
border: 1px solid #aaa;
padding: 2em;
}
div.invisible ul
{
display: none;
}
#invisible ul li, #visible ul li
{
list-style: none;
}
ul
{
list-style: none;
}
Si conocen algun manual o algo asi les estaria super agradecido.
Saludos
