Comment créer la page FAQ extensible en HTML?

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

  •  18-09-2019
  •  | 
  •  

Question

Je voudrais créer une page FAQ pour mon site web qui répertorie toutes les questions que des hyperliens. Lorsque le lien est cliqué, la réponse à cette question devrait étendre à au-dessous.

Les réponses doivent être masqués par défaut, et en cliquant sur le lien de préférence toggles la visibilité des réponses.

Toutes les 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 des scripts, des styles, incorporez, iframe, ou quoi que ce soit à côté de texte basique, il semblerait. Les grandes idées tout le monde, mais il semble que je vais devoir se contenter d'une table de style Table des matières FAQ.

Était-ce utile?

La solution

Exemple simple en utilisant 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>

Autres conseils

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>

Eh bien, avoir les réponses dans un conteneur div chaque dessous de la question.

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

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

Quelque chose comme ceci avec Query (a besoin des tests pour les fautes de frappe, etc.): 

$(function()

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

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

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 dans le Javascript est simple basculement: 

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

Vous pouvez étudier le code de « FAQ Extensible » - il est disponible sur GitHub: https://github.com/SolidMVC/ExpandableFAQ Et il est a ce mechanizm expand-effondrement avialable à /UI/Templates/Front/FAQsList.php ( https://github.com/SolidMVC/ExpandableFAQ /blob/master/UI/Templates/Front/FAQsList.php )

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top