I need to set up a FAQ in this style:
I click on the question, it presents the answer on the side. If I click on another question, the answer should alternate and show the answer for another question clicked. How can I do this? From what I researched I noticed that I need a script, but I just started learning html just because of work, so I do not know much .. Any ideas?
Here's a quick example of how to do it:
function mostraResposta(id){
respostas = document.getElementsByClassName('faq'); //recupera todos elementos da classe faq
for (var i = 0; i < respostas.length; i++) { // coloca todos eles invisiveis
respostas[i].style.display = 'none';
}
clicada = document.getElementById(id); //recupera o id passado por argumento
clicada.style.display = 'inherit'; //faz ele ser exibido conforme o item pai
}#links {
float: left;
max-width: 50%;
}
#links li {
cursor: pointer;
transition: 0.3s ease;
opacity: 0.7;
}
#links li:hover {
opacity: 1;
}
#respostas {
float: right;
max-width: 50%;
}
.faq {
margin: 20px;
display: none; /* coloca todos como invisiveis inicialmente */
}<div id="conteudo">
<div id="links">
<ul>
<li onclick="mostraResposta('lorem')">Lorem</li>
<li onclick="mostraResposta('ipsum')">Ipsum</li>
</ul>
</div>
<div id="respostas">
<div id="lorem" class="faq">Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
Lorem Lorem Lorem Lorem Lorem Lorem Lorem </div>
<div id="ipsum" class="faq">Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum
Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum Ipsum </div>
</div>
</div>