Come creare una pagina di FAQ espandibile in HTML?

Mi piacerebbe creare una pagina di FAQ per il mio sito web che elenca tutte le domande come collegamenti ipertestuali. Quando si fa clic sul collegamento, la risposta per quella domanda dovrebbe espandersi al di sotto di essa.Come creare una pagina di FAQ espandibile in HTML?

Le risposte devono essere nascoste per impostazione predefinita, e preferibilmente facendo clic sul collegamento si attiva la visibilità delle risposte.

Qualche idea?

Modifica

Ho provato diversi dei suggerimenti, ma purtroppo sembra che Google Sites non consente alcuna di tale funzionalità nel codice HTML. Non riesco a utilizzare script, stili, embed, iframe o altro oltre alla formattazione di base del testo. Grandi idee a tutti, ma sembra che dovrò accontentarmi di una FAQ in stile Table of Contents.

fonte

2010-03-08 CodeFusionMobile

Semplice esempio utilizzando 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>

fonte

2010-03-08 17:23:08 rogeriopvl

Non hai davvero bisogno della parte hide(). Puoi fare questo: $ (this) .next ('. Content'). Toggle(); e avere i collegamenti passare da nascondere e mostrare e il display dovrebbe essere 'nessuno' invece di 'nascosto'. – Chris

Cosa succede se è necessario collegarsi a uno di questi collegamenti da una pagina esterna? – baron5

Bene, avere le risposte in un contenitore div ciascuna sotto la domanda.

I div avranno l'attributo display:hidden per impostazione predefinita.

Facendo clic sui collegamenti, questo stile CSS verrà rimosso con JavaScript.

Qualcosa di simile con Query (esigenze di prova per errori di battitura, ecc):

$(function() 

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

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

fonte

2010-03-08 17:16:30

Purtroppo, Google Sites non sembra supportare gli stili. – CodeFusionMobile

Ecco un possibile approccio:

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

fonte

2010-03-08 17:21:15 p2u

In HTML si utilizza questo modello:

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

e nella commutazione JavaScript è semplice:

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

fonte

2010-03-08 17:30:03 Robusto

Come creare una pagina di FAQ espandibile in HTML?

risposta

Problemi correlati