Cómo crear página de preguntas frecuentes ampliable en HTML?

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

  •  18-09-2019
  •  | 
  •  

Pregunta

Me gustaría crear una página de preguntas frecuentes para mi sitio web que muestra todas las preguntas como hipervínculos. Cuando se hace clic en el enlace, la respuesta a esa pregunta debe ampliar a cabo por debajo de él.

Las respuestas deben ser ocultados, y preferiblemente clic en el enlace activa la visibilidad de las respuestas.

¿Alguna idea?

Editar

He intentado varias de las sugerencias, pero por desgracia, parece que Google los sitios no permite que cualquiera de funcionalidad en el html. No puedo usar scripts, estilos, embed, iframe, o cualquier cosa al lado de texto básico de formatear lo que parece. Las grandes ideas a todos, pero parece que voy a tener que conformarse con una Tabla de Contenido Preguntas estilo.

¿Fue útil?

Solución

ejemplo simple que utiliza 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>

Otros consejos

A continuación, un posible enfoque: 

<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>

Bueno, tener las respuestas en un recipiente div cada uno debajo de la pregunta.

Los divs tendrán atributo display:hidden por defecto.

Al hacer clic en los enlaces, este estilo CSS se puede quitar con JavaScript.

Algo como esto con Query (necesita pruebas para los errores tipográficos, etc.): 

$(function()

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

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

En el HTML que utiliza este patrón: 

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

y en la conmutación Javascript es simple: 

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

Es posible que desee estudiar el código de "Preguntas ampliable" - que está disponible en GitHub: https://github.com/SolidMVC/ExpandableFAQ Y se tiene que ampliar colapso mechanizm avialable en /UI/Templates/Front/FAQsList.php ( https://github.com/SolidMVC/ExpandableFAQ /blob/master/UI/Templates/Front/FAQsList.php )

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top