Como criar um site
Sistema de FAQ igual Centauro.com.br
1/9/2008
Um sisteminha simples de exibir conteúdo ao se clicar no título. Interessante para FAQs.
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.
Bem é só isso.
Abs
Allan Carvalho
AC Soluções Interativas - Desenvolvimento de Sites
