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.
