Wie erstelle ich eine erweiterbare FAQ-Seite in HTML?

Ich möchte eine FAQ-Seite für meine Website erstellen, die alle Fragen als Hyperlinks auflistet. Wenn auf den Link geklickt wird, sollte die Antwort für diese Frage darunter erscheinen.Wie erstelle ich eine erweiterbare FAQ-Seite in HTML?

Die Antworten müssen standardmäßig ausgeblendet sein. Wenn Sie auf den Link klicken, wird die Sichtbarkeit der Antworten geändert.

Irgendwelche Gedanken?

bearbeiten

Ich habe einige der Vorschläge versucht, aber leider sieht es aus wie Google Sites ermöglicht keine dieser Funktionalität in den HTML-Code. Ich kann keine Skripte, Stile, Einbetten, Iframe oder irgendetwas neben der grundlegenden Textformatierung verwenden, die es erscheinen würde. Tolle Ideen für alle, aber es sieht so aus, als müsste ich mich mit einer FAQ zum Thema Inhalt zufriedengeben.

Quelle

2010-03-08 CodeFusionMobile

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>

Quelle

2010-03-08 17:23:08 rogeriopvl

Sie brauchen den hide() -Teil nicht wirklich. Sie können Folgendes tun: $ (this) .next ('. Content'). Toggle(); und lassen Sie die Links von verstecken und zeigen und die Anzeige sollte "keine" anstelle von "versteckt" sein. – Chris

Was ist, wenn man von einer externen Seite auf einen dieser Links verlinken muss? – baron5

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

Die divs haben standardmäßig das Attribut display:hidden.

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

So etwas wie dies mit Query (benötigte Tests für Tippfehler etc.):

$(function() 

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

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

Quelle

2010-03-08 17:16:30

Leider Google Sites scheint Stile nicht zu unterstützen. – CodeFusionMobile

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

Quelle

2010-03-08 17:21:15 p2u

Im 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 Makeln ist einfach:

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

Quelle

2010-03-08 17:30:03 Robusto

Wie erstelle ich eine erweiterbare FAQ-Seite in HTML?

Antwort

Verwandte Themen