Bom... Concordo com o
pgnall.
Tirarei 3 linhas do JS, também vou tirar o id do span e colocarei mais uma div e um span.
Olha:
<script>
function me(div) {
var divq = document.getElementById(div).style;
if (divq.display == 'none') {
divq.display = 'block';
}
else {
divq.display = 'none';
}
}
</script>
<span onclick="me('joao');" style="cursor: pointer;">João</span>
<span onclick="me('maria');" style="cursor: pointer;">Maria</span>
<div id="joao" style="display: none;">
Todo o texto e imagens dentro da DIV joao que corresponde ao: João
</div>
<div id="maria" style="display: none;">
Todo o texto e imagens dentro da DIV maria que corresponde à: Maria
</div>
Muito bom? Mão na massa, OK?
Mão na massa:
Primeiro crie o link e dentro das aspas simples coloque o nome da pessoa em minusculo e sem acento:
<span onclick="me('ricardo');" style="cursor: pointer;">Ricardo</span>
Certo? Isso chama a função
me para que ela exiba a DIV com o id
ricardoAgora falta a DIV...
Crie uma DIV e coloque um
ID com o nome da pessoa que foi colocada ateriormente. Assim:
<div id="ricardo" style="display: none;">Conteúdo do Ricardo.</div>
Lembrando: Sem acentos e tudo minusculo, pois já esta dessa forma no passo anterior. O estilo
display none significa que essa div não será exibida.
Tudo pronto? Código:
<script>
function me(div) {
var divq = document.getElementById(div).style;
if (divq.display == 'none') {
divq.display = 'block';
}
else {
divq.display = 'none';
}
}
</script>
<span onclick="me('joao');" style="cursor: pointer;">João</span>
<span onclick="me('maria');" style="cursor: pointer;">Maria</span>
<span onclick="me('ricardo');" style="cursor: pointer;">Ricardo</span>
<div id="joao" style="display: none;">
Todo o texto e imagens dentro da DIV joao que corresponde ao: João
</div>
<div id="maria" style="display: none;">
Todo o texto e imagens dentro da DIV maria que corresponde à: Maria
</div>
<div id="ricardo" style="display: none;">Conteúdo do Ricardo.</div>
Lembrando:
Oque está em cinza não foi modificado.Agora, oque retirei do script e do HTML foi oque?
var divmm = document.getElementById('maismenos');
divmm.innerHTML = "-";
divmm.innerHTML = "+";
id="maismenos"
Cada correspondente a sua cor:
Chama o ID maismenos. Como eu tirei ele vou ter que tirar essa linha senão dá erro.
Essa linha colocaria um texto no divmm que é o: -
Essa linha colocaria um texto no divmm que é o: +
Como não se pode ter mais que um id igual é obrigatorio tirar. Bem que poderiamos atribuir um id para cada span, mas é desnecessário e polui o código
Tudo bem explicadinho...
Pegou o esquema agora?

Até mais.
Edição feita por: invasoesdemaniacos, 22/07/2006, 20:53.