Comment créer une page FAQ extensible en HTML?

Je voudrais créer une page FAQ pour mon site Web qui répertorie toutes les questions sous forme de liens hypertexte. Lorsque le lien est cliqué, la réponse à cette question devrait se développer en dessous.Comment créer une page FAQ extensible en HTML?

Les réponses doivent être masquées par défaut, et si vous cliquez de préférence sur le lien, la visibilité des réponses sera modifiée.

Des pensées?

Modifier

J'ai essayé plusieurs des suggestions, mais malheureusement, il semble que les sites Google ne permet pas de cette fonctionnalité dans le code HTML. Je ne peux pas utiliser de scripts, de styles, d'imbrications, d'iframe ou d'autres éléments à côté de la mise en forme du texte de base. Bonne idée à tout le monde, mais il me semble que je vais devoir me contenter d'une FAQ de style Table des matières.

Source

2010-03-08 CodeFusionMobile

Exemple simple avec 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>

Source

2010-03-08 17:23:08 rogeriopvl

Vous n'avez pas vraiment besoin de la partie hide(). Vous pouvez simplement faire ceci: $ (this) .next ('. Content'). Toggle(); et avoir les liens bascule de cacher et montrer et l'affichage devrait être «aucun» au lieu de «caché». – Chris

Et si vous deviez créer un lien vers l'un de ces liens à partir d'une page externe? – baron5

Eh bien, ayez les réponses dans un conteneur div ci-dessous la question.

Les divs auront l'attribut display:hidden par défaut.

En cliquant sur les liens, ce style CSS sera supprimé avec JavaScript.

Quelque chose comme ceci avec Query (NEEDS test pour les fautes de frappe, etc.):

$(function() 

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

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

Source

2010-03-08 17:16:30

Malheureusement, les sites Google ne semble pas supporter les styles. – CodeFusionMobile

Voici une approche possible:

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

Source

2010-03-08 17:21:15 p2u

Dans le code HTML que vous utilisez ce modèle:

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

et le basculement Javascript est simple:

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

Source

2010-03-08 17:30:03 Robusto

Comment créer une page FAQ extensible en HTML?

Répondre

Questions connexes