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

Me gustaría crear una página de preguntas frecuentes para mi sitio web que enumera todas las preguntas como hipervínculos. Cuando se hace clic en el enlace, la respuesta a esa pregunta debe expandirse debajo de él.¿Cómo crear una página de preguntas frecuentes ampliable en HTML?

Las respuestas deben estar ocultas de forma predeterminada, y preferiblemente haciendo clic en el enlace se alterna la visibilidad de las respuestas.

¿Alguna idea?

Edición

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, incrustaciones, iframes ni nada que no sea el formato de texto básico que aparecería. Grandes ideas para todos, pero parece que tendré que conformarme con las preguntas frecuentes de estilo de tabla de contenido.

Fuente

2010-03-08 CodeFusionMobile

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>

Fuente

2010-03-08 17:23:08 rogeriopvl

Realmente no necesita la parte hide(). Simplemente puede hacer esto: $ (this) .next ('. Content'). Toggle(); y tienen los enlaces para alternar entre ocultar y mostrar y la pantalla debe ser 'ninguna' en lugar de 'oculta'. – Chris

¿Qué sucede si uno necesita vincular a uno de esos enlaces desde una página externa? – baron5

Bien, tenga las respuestas en un contenedor div cada una debajo de la pregunta.

Los divs tendrán el atributo display:hidden de forma predeterminada.

Al hacer clic en los enlaces, este estilo CSS se eliminará con JavaScript.

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

$(function() 

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

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

Fuente

2010-03-08 17:16:30

Desafortunadamente, Google Sites no parece admitir estilos. – CodeFusionMobile

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

Fuente

2010-03-08 17:21:15 p2u

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'; 
}

Fuente

2010-03-08 17:30:03 Robusto

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

Respuesta

Cuestiones relacionadas