Ocultar e mostrar divs

Gabi F. · Setembro 20, 2010

Oi gente, primeiramente vou postar meu codigo, depois falerei meu problema, então, esse é meu codigo:

<script>
function abrefecha(obj) {

switch (obj.id) {
case 'primeiro':

document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";


break
case 'segundo':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";


break

case 'terceiro':

document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";


break
}
}
</script><font face="verdana">
<div id="principal" style="background-color: blue;">Conteúdo
<a href="#" id="segundo" onclick="abrefecha(this);"><img src="http://habboemotion.com/resource/images/icons/v22_2.gif" border="0"></a>
</div>
<div id="divum" style="display:none; background-color: yellow;">Conteúdo<a href="#" id="primeiro" onclick="abrefecha(this);"><img src="http://habboemotion.com/resource/images/icons/v22_1.gif" border="0"></a><BR></div>
<div id="oooi" style="background-color: green;">Oi, aqui fica o conteúdo do meu site!</div>

Esse codigo está funcionando normalmente, porém quero que ao clicar no "-" (menos) o "Oi, aqui fica o conteúdo do meu site!" desapareça, e quando clicar no "+" ele apareça, o problema é que esse texto tem que estar em outra div. Basicamente, o que quero é que esse + abra em outra div e o mesmo com o menos.

Editado Setembro 20, 2010 por *FIT*
Adicionar tag's! *FIT*

*FIT* · Setembro 20, 2010

Movendo de HTML para Javascript!

kuroi · Setembro 23, 2010

não entendi. porque você simplesmente não cria outra div e copia o texto??

qual o problema q esta acontecendo??

Editado Setembro 23, 2010 por kuroi

Stoma · Setembro 24, 2010

É só seguir a lógica que você estava fazendo para sumir ou aparecer as div's 'principal' e 'divum'... veja só:

<html>
    <head>
        <title>Teste</title>

        <script>
            function abrefecha(obj){
                switch(obj.id){
                    case 'primeiro':
                        document.getElementById('principal').style.display="block";
                        document.getElementById('divum').style.display="none";
                        document.getElementById('oooi').style.display="block";
                        break;
                    case 'segundo':
                        document.getElementById('principal').style.display="none";
                        document.getElementById('divum').style.display="block";
                        document.getElementById('oooi').style.display="none";
                        break;
                    case 'terceiro':
                        document.getElementById('principal').style.display="none";
                        document.getElementById('divum').style.display="none";
                        break;
                }
            }
        </script>
    </head>

    <body style="font-family:Verdana;">
        <div id="principal" style="background-color: blue;">
            Conteúdo
            <a href="#" id="segundo" onclick="abrefecha(this);">
                <img src="http://habboemotion.com/resource/images/icons/v22_2.gif" border="0">
            </a>
        </div>

        <div id="divum" style="display:none; background-color: yellow;">
            Conteúdo
            <a href="#" id="primeiro" onclick="abrefecha(this);">
                <img src="http://habboemotion.com/resource/images/icons/v22_1.gif" border="0">
            </a>
            <br>
        </div>

        <div id="oooi" style="background-color: green;">
            Oi, aqui fica o conteúdo do meu site!
        </div>
    </body>
</html>

Entrar

Ocultar e mostrar divs

Pergunta

Gabi F.

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

FIT

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Stoma

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades