Ocultar/Mostrar Texto

[donato23]

Ola a todos.

Gostaria de vossa ajuda

Não entendo de Java script e estou com o código abaixo , quase funcionando do jeito que eu gostaria  http://www.robertodonato.com/php/pr.htm

O problema e que gostaria que na abertura da pagina as resposta aparecessem escondidas, mas quando a pagina ´´e carregada , todas as respostas estão expandidas.

O Outro código abaixo , muito mais simples, faz quase a mesma coisa, no entanto seriam cerca de 50 perguntas e respostas, e eu quero que apenas a resposta clicada fique na tela.

Outra coisa, como insiro um .css para dar um visual nesta pagina.

Obrigado.

<script language="javascript" type="text/javascript">
    /*    FUNÇÃO QUE ESCONDE E MOSTRA AS DIV´S 
    ------------------------------------------------------------------------------
    */
    function esconderTudo(){
        document.getElementById('mostrarDetalhes_01').style.display = "none";
        document.getElementById('mostrarDetalhes_02').style.display = "none";
        document.getElementById('mostrarDetalhes_03').style.display = "none";
        
        document.getElementById('h4_mostrarDetalhes_01').className = "normal";
        document.getElementById('h4_mostrarDetalhes_02').className = "normal";
        document.getElementById('h4_mostrarDetalhes_03').className = "normal";
        
        document.getElementById('link_mostrarDetalhes_01').className = "nao_visitado";
        document.getElementById('link_mostrarDetalhes_02').className = "nao_visitado";
        document.getElementById('link_mostrarDetalhes_03').className = "nao_visitado";

    }

    /*
    --------------------------------------------------------------
    Esta função esconde os detalhes 
    --------------------------------------------------------------
    */
    function mostrarDetalhe(sDiv){
        if(document.getElementById("h4_" + sDiv).className == "normal"){
            esconderTudo();
            
            document.getElementById("h4_" + sDiv).className = "clicado";
            document.getElementById("link_" + sDiv).className = "visitado";
            document.getElementById(sDiv).style.display = "block";
        }
        else{
            esconderTudo();
        }
    }
    </script>

Outro codigo

<script language=JavaScript1.2>
<!--
var head="display:''"
function doit(header){
var head=header.style
if (head.display=="none")
head.display=""
else
head.display="none"
}
//-->
</SCRIPT>

[ESerra]

Não é mais fácil você definir que a div deve estar oculta quando a página abrir? Isso pode ser feito com style...

Exemplo:

<div style="visibility: hidden;">
tá escondido...
</div>

[KaKarotto]

Opa. Tem como falar a lógica do seu sistema?

Pelo que eu entendi, você quer colocar as perguntas na página porém ocultas, aparecendo a princípio apenas a primeira pergunta. Isso eu entendi, mas como você vai fazer as opções de resposta ?????

Pelo que eu vi no site, só tem a pergunta como link. A pessoa clica no link e aparece a resposta...é isso mesmo?!?!? você não quer que a pessoa escolha uma resposta??

Se eu estiver errado e caso queira implementar um sistema de perguntas onde o usuário tenha que escolher uma resposta, seria interessante implementar isso com linguagem de servidor, já que se a pessoa for um pouquinho esperta e abrir o código fonte da página vai ver todas as respostas lá.

Esse seu código ta cheio de getElementById....não é uma boa...Se escrever um bom html você economiza inclusive no javascript. Então, diga como quer implementar isso, com todas as letras porque pra mim está ainda obscuro.

Akelabrasssssss

[Guest --donato23 --]

Na verdade eu quero o que está em http://www.robertodonato.com/php/pr.htm, só que eu quero abrir tudo "minimizado", e está loadando a pagina com as respostas abertas.

Estas perguntas e respostas são duvidas de usarios frequente a um sistema que possuo.

Obrigado.

[KaKarotto]

Estas perguntas e respostas são duvidas de usarios frequente a um sistema que possuo.

Obrigado.

Ahhhhh...agora ficou claro pra mim...aqueles sistemas de FAQ.

Se você montar o html bem feito você economiza no javascript, como eu tinha falado.

Sendo assim, o sistema fica muito fácil de montar:

Entre as tags <head></head>:

Javascript

<script type="text/javascript">

window.onload=function(){
var alinks=document.getElementById("FAQ").getElementsByTagName("a")
 for(var x=0; x<alinks.length; x++){
     alinks[x].show=0
     alinks[x].onclick=function(){
          if(this.show==0){
          this.parentNode.getElementsByTagName("span")[0].style.display="block"
          this.show=1
          }
          else{
          this.parentNode.getElementsByTagName("span")[0].style.display="none"
          this.show=0
          }
      return false
    }
 }
}
</script>

Css

<style type="text/css">
#FAQ span{
 display:none;
}
</style>

Agora no corpo do HTML:

<ul id="FAQ">
<li>
<a href="pgResposta">O que eu devo fazer não sei a onde?</a>
<span>Você deve fazer não sei o que.</span>
</li>

<li>
<a href="pgResposta">O que eu devo fazer não sei a onde?</a>
<span>Você deve fazer não sei o que.</span>
</li>

<li>
<a href="pgResposta">O que eu devo fazer não sei a onde?</a>
<span>Você deve fazer não sei o que.</span>
</li>

<li>
<a href="pgResposta">O que eu devo fazer não sei a onde?</a>
<span>Você deve fazer não sei o que.</span>
</li>


</ul>

[/codebox]

Pensando bem na estrutura do html te ajuda a montar um javascript com menos código e mais genérico, você não precisa mexer no javascript, basta incluir mais perguntas ou remover algumas outras perguntas, sempre usando o sistema:

ul ->li

li -> a

li -> span

Akeleabrassssss