Wie erstelle ich eine erweiterbare FAQ -Seite in HTML?

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

  •  18-09-2019
  •  | 
  •  

Frage

Ich möchte eine FAQ -Seite für meine Website erstellen, auf der alle Fragen als Hyperlinks aufgeführt sind. Wenn der Link geklickt wird, sollte die Antwort auf diese Frage darunter erweitern.

Die Antworten müssen standardmäßig versteckt sein und vorzugsweise auf den Link klicken, um die Sichtbarkeit der Antworten zu wechseln.

Irgendwelche Gedanken?

Bearbeiten

Ich habe einige der Vorschläge ausprobiert, aber leider sieht es so aus, als ob Google -Websites diese Funktionalität in der HTML nicht zulässt. Ich kann keine Skripte, Stile, Einbetten, Iframe oder irgendetwas anderes als grundlegende Textformatierung verwenden. Tolle Ideen allerseits, aber es sieht so aus, als müsste ich mich mit einem FAQ im Inhaltsstil zufrieden geben.

War es hilfreich?

Lösung

Einfaches Beispiel mit 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>

Andere Tipps

Hier ein möglicher Ansatz:

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

Nun, haben Sie die Antworten in einem div Container jeweils unter der Frage.

Die Divs werden haben display:hidden standardmäßig Attribut.

Wenn Sie auf die Links klicken, wird dieser CSS -Stil mit JavaScript entfernt.

So etwas mit Abfrage (muss auf Tippfehler getestet werden usw.):

$(function()

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

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

In der HTML verwenden Sie dieses Muster:

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

und im JavaScript -Umschalten ist einfach:

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

Möglicherweise möchten Sie den Code "erweiterbarer FAQ" untersuchen - er ist auf GitHub verfügbar:https://github.com/solidmvc/expandablefaqUnd es hat die expand-collapse-Mechanizm-Mechanizmien unter /ui/templates/front/faqslist.php ( https://github.com/solidmvc/expandablefaq/blob/master/ui/templates/front/faqslist.php )

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top