HTML - How to show/hide content by clicking on a "link"?

Asked

Viewed 2,202 times

-2

I need to set up a FAQ in this style: EXEMPLO DO FAQ

I click on the question, it presents the answer on the side. If I click on another question, the answer should switch and show the answer referring to another clicked question. How can I do that? From what I researched I noticed that I need a script, but I just started learning html precisely because of the work, so I don’t know much.. Any idea?

javascript html web-application script

  • So, they use javascript for this, it would be like "when clicking on the text with the id such, the text such appears in the field", html does not do this since it is only a markup language. ----------- You could do using jQuery as well (which I believe is easier, since jQuery is a simplified javascript library). If you don’t know either, I suggest starting with javascript, so you get a sense of what it is, and then using jquery. Javascript course (videoaula), or [this one, which is in English, but which explains in great detail about everything](

  • One of the first steps of who is starting, and take careful not to reinvent the wheel. Ever heard of Ootsrap? Here’s an example of what you want: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp. I recommend you read: https://www.w3schools.com/bootstrap/bootstrap_get_started.asp.

  • It has to be exactly on the side?

  • Yeah, it needs to be right next door

  • Thanks Gabrielrodrigues and Marcosmarques for the reference links and tips! I started reading and I understand, will help a lot

1 answer

1


Here is a small example of how to do:

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>

  • Cool, thanks!

  • Good, Little Arrow up then!

  • My low reputation ta still kkkkkk it does not mark but I voted!

  • Now you can.

  • Aee, thanks a man!

Browser other questions tagged javascript html web-application script

You are not signed in. Login or sign up in order to post.