Exibir/Ocultar Div dentro de outra Div

[willkey 0]

Olá!

Estou com dificuldade em exibir/ocultar um conteúdo de uma Div que "está" dentro de outra Div.

No exemplo em anexo, existe duas "chamadas principais": "GOLEIROS" e "EQUIPES".

Ao clicar em "GOLEIROS" é exibida uma tabela simples referente a goleiros.
Ao clicar em "EQUIPES" é exibida duas "chamadas secundárias": "ATLETICO" e "BARCELONA".

Ao clicar em "ATLETICO" ou "BARCELONA" é exibido o conteúdo específico de cada uma, porém, o meu problema surge aí, se clico em "ATLETICO" as informações referente a essa opção não abrem abaixo dela, tanto "ATLETICO" e "BARCELONA" somem e dão lugar a informação e só voltam a ser exibidas se eu clicar na chamada principal "EQUIPES", gostaria de resolver isso fazendo que "ATLETICO" e "BARCELONA" continuem lado a lado quando abrir as informações de uma delas.

No exemplo são duas equipes, mas o objetivo é colocar 12 equipes e quando clicar no nome/escudo aparecer todo o elenco igual mostra na pagina: http://www.cpshowdebola.com.br/multimidia

Provavelmente é coisa simples, mas não estou conseguindo resolver se é no html ou no script, já procurei outras dicas e tutoriais, mas não obtive sucesso.

OBS.: Não tem nada em CSS. Tentei inserir o anexo, mas deu erro.

<!--MENU ESTATISTICA--><center>
<table border="2" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td><aa style="cursor: pointer;" onclick="mostra('goleiros');">GOLEIROS</aa></td>
	    <td><aa style="cursor: pointer;" onclick="mostra('equipes');">EQUIPES</aa></td>
        </tr>
    </tbody>
</table>
<p></p>
<!--GOLEIROS-->
<div id="goleiros" style="display: none;">
    <table border="2" frame="hsides" rules="rows" cellpadding="3" align="center">
        <tbody>
            <tr align="center">
                <td colspan="6"><span style="font-family: 'trebuchet ms', geneva, sans-serif; font-size: 12pt;"><strong>GOLEIRO MENOS VAZADO</strong></span></td>
            </tr>
            <tr align="center">
                <td><span style="font-family: 'trebuchet ms', geneva, sans-serif; font-size: 12pt;">EQUIPE</span></td>
            </tr>
        </tbody>
    </table>
</div>
<!--EQUIPES-->
<div id="equipes" style="display: none;">
    <table border="2" cellspacing="2" cellpadding="2">
        <tbody>
            <tr>
                <td><aa style="cursor: pointer;" onclick="mostra('amadrid');">ATLETICO</aa></td>
		<td><aa style="cursor: pointer;" onclick="mostra('barcelona');">BARCELONA</aa></td>
            </tr>
        </tbody>
    </table>
</div>
<!--ATLETICO-->
<div id="amadrid" style="display: none;">
    <table border="2" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td style="text-align: center; width: 155px;">ATLETICO<br /> <span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;">
		<span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;">Jogador 1</span> </span></strong></span><br /> 
		<span style="font-size: 8pt; font-family: 'trebuchet ms', geneva, sans-serif;"><strong>Comiss&atilde;o T&eacute;cnica</strong></span></td>
            </tr>
        </tbody>
    </table>
</div>
<!--BARCELONA-->
<div id="barcelona" style="display: none;">
    <table border="2" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td style="text-align: center; width: 155px;">BARCELONA<br /> <span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;">
		<span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;">Jogador 1</span> </span></strong></span><br /> 
		<span style="font-size: 8pt; font-family: 'trebuchet ms', geneva, sans-serif;"><strong>Comiss&atilde;o T&eacute;cnica</strong></span></td>
            </tr>
        </tbody>
    </table>
</div>
<!--SCRIPT-->
<script type="text/javascript">// <![CDATA[
function mostra(theId){
var theArray= new Array('goleiros','equipes','amadrid','barcelona');
w=document.getElementById(theId)
if(w.style.display=="block"){w.style.display='none';}else{ 
    for(i=0; i<theArray.length; i++){
   if(theArray[i] == theId){
    w.style.display='block';
   }else{
    document.getElementById(theArray[i]).style.display='none';
   }
   }
   }
   
}
// ]]></script>
</center>

 

[luiz14 16]

Segue o código abaixo:

 

<!--MENU ESTATISTICA--><center>
<table border="2" cellspacing="5" cellpadding="5">
    <tbody>
        <tr>
            <td><aa style="cursor: pointer;" onclick="mostra('goleiros');">GOLEIROS</aa></td>
        <td><aa style="cursor: pointer;" onclick="mostra('equipes');">EQUIPES</aa></td>
        </tr>
    </tbody>
</table>
<p></p>
<!--GOLEIROS-->
<div id="goleiros" style="display: none;">
    <table border="2" frame="hsides" rules="rows" cellpadding="3" align="center">
        <tbody>
            <tr align="center">
                <td colspan="6"><span style="font-family: 'trebuchet ms', geneva, sans-serif; font-size: 12pt;"><strong>GOLEIRO MENOS VAZADO</strong></span></td>
            </tr>
            <tr align="center">
                <td><span style="font-family: 'trebuchet ms', geneva, sans-serif; font-size: 12pt;">EQUIPE</span></td>
            </tr>
        </tbody>
    </table>
</div>
<!--EQUIPES-->
<div id="equipes" style="display: none;">
    <table border="2" cellspacing="2" cellpadding="2">
        <tbody>
            <tr>
                <td><aa style="cursor: pointer;" onclick="mostra('amadrid');">ATLETICO</aa></td>
        <td><aa style="cursor: pointer;" onclick="mostra('barcelona');">BARCELONA</aa></td>
            </tr>
        </tbody>
    </table>
</div>
<!--ATLETICO-->
<div id="amadrid" style="display: none;">
    <!----------------------------------------------------------------------------------------------------->
    <!--mudei essa parte aqui-->
    
    <div class="equipes">
    <table border="2" cellspacing="2" cellpadding="2">
        <tbody>
            <tr>
                <td><aa style="cursor: pointer;">ATLETICO</aa></td>
        <td><aa style="cursor: pointer;" onclick="mostra('barcelona');">BARCELONA</aa></td>
            </tr>
        </tbody>
    </table>
</div>
    
    <!--até aqui-->
    
    <table border="2" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td style="text-align: center; width: 155px;">ATLETICO<br /> <span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;">
        <span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;">Jogador 1</span> </span></strong></span><br /> 
        <span style="font-size: 8pt; font-family: 'trebuchet ms', geneva, sans-serif;"><strong>Comissão Técnica</strong></span></td>
            </tr>
        </tbody>
    </table>
</div>
<!--BARCELONA-->
<div id="barcelona" style="display: none;">
    <!----------------------------------------------------------------------------------------------------->
    <!-- e mudei essa parte também -->
    
    <div class="equipes">
    <table border="2" cellspacing="2" cellpadding="2">
        <tbody>
            <tr>
                <td><aa style="cursor: pointer;" onclick="mostra('amadrid');">ATLETICO</aa></td>
        <td><aa style="cursor: pointer;">BARCELONA</aa></td>
            </tr>
        </tbody>
    </table>
</div>
    
     <!--até aqui-->
     
    <table border="2" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td style="text-align: center; width: 155px;">BARCELONA<br /> <span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;">
        <span style="font-size: 8pt;"><strong><span style="font-family: verdana, geneva, sans-serif;"><span style="font-family: 'trebuchet ms', geneva, sans-serif;">Jogador 1</span> </span></strong></span><br /> 
        <span style="font-size: 8pt; font-family: 'trebuchet ms', geneva, sans-serif;"><strong>Comissão Técnica</strong></span></td>
            </tr>
        </tbody>
    </table>
</div>
<!--SCRIPT-->
<script type="text/javascript">// <![CDATA[
function mostra(theId){
var theArray= new Array('goleiros','equipes','amadrid','barcelona');
w=document.getElementById(theId)
if(w.style.display=="block"){w.style.display='none';}else{ 
    for(i=0; i<theArray.length; i++){
   if(theArray == theId){
    w.style.display='block';
   }else{
    document.getElementById(theArray).style.display='none';
   }
   }
   }
   
}
// ]]></script>

 

Dá uma olhada e vê se tá funcionando como você quer.