PUBLICIDADE
Este artigo tem nota
9,5

Autor

webmorphos

Allan Carvalho

membro deste agosto de 2008

Compartilhe e guarde

  • Rec6
  • StumbleUpon
  • ueba
  • linkk
  • dihitt
  • linkloko
  • linkto
  • Technorati
  • Simpy
  • del.icio.us
  • Faves: Fave It!

PUBLICIDADE

Enquete

Você acredita que um dia o Firefox será mais utilizado que o IE?
terça-feira, 23 de setembro de 2008

Sistema simples de FAQ


O sistema é bem simples, utilizei no site de um cliente a pouco tempo:
http://www.logotiposbrasil.com.br/faq.asp

A idéia é quando clicar no título o texto referente ao título seja exibido logo abaixo.

Vamos ao código javascript:
<script type="text/javascript">
function acMostra(id) {
//captura o elemento que irá aparecer
var res = document.getElementById(id);
//testa se ele está visivel ou não
//se estiver torna-o invisivel, caso contrário o inverso =D
if (res.style.display == 'block') res.style.display = 'none';
else res.style.display = 'block';
}
</script>


Agora o html:
<!-- Void(0) interrompe a função original, que no caso é seguir um link, setamos o onclick para chamar a nossa função e passamos o id do elemento que deverá ser exibido, no caso o res1. -->
<a href="javascript: void(0);" onclick="acMostra('res1');" name="13">1. Como e onde eu posso utilizar o meu novo logotipo ?
</a><br />

<!-- este é o nosso elemento que se encontra invisivel (display: none;) -->
<p class="resposta" id="res1" >Você pode utilizar o seu novo logotipo em impressos, camisetas, sinalizações, publicações web, revistas, jornais e onde mais a sua imaginação permitir.</p>

Para completar o css:
<style type="text/css">
.resposta { display: none; }
</style>


Pronto, bem simples.
Vale a pena ressaltar que não usei visibility: hidden porque utilizando este recurso o texto que está invisível irá ocupar o espaço dele mesmo quando não estiver visível, utilizando display:none e display: block não sofremos com este problema.

O exemplo pode ser visto em:
http://www.allancarvalho.com.br/tutoriais/exemplos/faq-estilo-centauro.html

Bem é só isso.

Abs
Allan Carvalho
AC Soluções Interativas - Desenvolvimento de Sites
Sim   Não   Este artigo foi útil para você?
NotaComentário
10
usertop comentou em 11/11/2009

Ótimo

Exelente código muito bom mesmo parabens
9
dgf comentou em 18/12/2008

Valeu

Allan, valeu pelo código era justamente o que estava precisando pra usar na intranet do trabalho............
Regras:
Os comentários seguem as seguintes regras:
  • Todos os comentários são enviados por membros cadastrados no site.
  • A pontuação de comentários de conteúdo do próprio membro não serão computados.
  • Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
  • Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
  • O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
  • Há um limite de 10 comentários por dia para cada membro.
  • Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

     (ainda não tem cadastro? clique aqui!)


Máximo de 30 caracteres

Máximo de 255 caracteres
 

R&W Consulting - Soluções Web Hospedagem UOL HOST PagSeguro - solução para pagamentos online
© 2006-2009 R&W Informática Ltda. - Todos os direitos reservados.