Como criar uma página de perguntas frequentes expansíveis em HTML?

StackOverflow https://stackoverflow.com/questions/2403146

  •  18-09-2019
  •  | 
  •  

Pergunta

Eu gostaria de criar uma página de perguntas frequentes para o meu site que lista todas as perguntas como hiperlinks. Quando o link é clicado, a resposta para essa pergunta deve se expandir abaixo dele.

As respostas precisam ser ocultas por padrão e, de preferência, clicar no link alterna a visibilidade das respostas.

Alguma ideia?

Editar

Eu tentei várias sugestões, mas infelizmente parece que os sites do Google não permitem nenhuma dessas funcionalidades no HTML. Não posso usar scripts, estilos, incorporação, iframe ou qualquer coisa ao lado da formatação básica de texto que apareceria. Ótimas idéias a todos, mas parece que terei que me contentar com uma FAQ em estilo de Índice.

Foi útil?

Solução

Exemplo simples usando jQuery:

JavaScript/jQuery

<script type="text/javascript">
$(document).ready(function(){
    $('.faqlink').click(function(){
        $('.content').hide();
        $(this).next('.content').show();
    });
});
</script>

CSS

<style type="text/css">
.content {
    display: hidden;
}
</style>

Html

<h2>My FAQ</h2>
<a class="faqlink" href="#">Link 1</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 2</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 3</a>
<div class="content">lorem ipsum</div>

Outras dicas

Aqui é uma possível abordagem:

<html><body><script>

function toggleElement(id)
{
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}
</script>
<p>
<a href="javascript:toggleElement('a1')">Is this a question?</a>
</p>
<div id="a1" style="display:none">
This is an answer.
</div>
</body>
</html>

Bem, tenha as respostas em um div Recipiente cada um abaixo da pergunta.

Os divs terão display:hidden atributo por padrão.

Ao clicar nos links, esse estilo CSS será removido com JavaScript.

Algo assim com consulta (precisa de testes para erros de digitação etc.):

$(function()

  { $("a[name='Question1']").click(function()

    { $("div[name='Answer1']").removeClass("answer-hidden"); }); });

No HTML, você usa este padrão:

<div style="parentContainer">
  <div style="titleContainer" onclick="toggleContents(this)">Link to click on</div>
  <div style="contentContainer">Some content here.</div>
</div>

E no javascript alternando é simples:

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}

Você pode estudar o código de "FAQ expansível" - está disponível no Github:https://github.com/solidmvc/expandablefaqE tem esse mecanizo de expansão-colapso, em /ui/templates/front/faqslist.php ( https://github.com/solidmvc/expandablefaq/blob/master/ui/templates/front/faqslist.php )

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top