Ausklappbare FAQ

    Hey Leute!

    Hier eine vermutlich sehr simple Frage, allerdings komme ich trotzdem nicht allein auf die Antwort....:roll:
    Ziel ist es, mehrere ausklappbare FAQ Fragen zu erstellen. Beim Betreten der Seite sollen die Fragen zugeklappt sein. Hierfür habe ich folgenden Code verwendet:

    HTML
    <p><span style="display: block; border: #cccccc 1px solid; padding: 10px; color: #004185; cursor: pointer;" onclick="document.getElementById('text').style.display='block';
document.getElementById('an').style.display='none';
document.getElementById('zu').style.display='block'" id="an" class="item"> <span class="fa fa-plus"> </span> Noch nicht angeklick!</span> <span onclick="document.getElementById('text').style.display='none';
document.getElementById('an').style.display='block';
document.getElementById('zu').style.display='none'" id="zu" style="display: block; border: #cccccc 1px solid; padding: 10px; color: #004185; cursor: pointer; a: hover { background: #004185 };" class="item"><span class="fa fa-plus"> </span> Angeklick!</span></p>
<div id="text" style="display: none;">Test Text.</div>

    Das klappt soweit auch gut! Mein Problem ist nur, dass beim betreten der Seite quasi beide Reiter für "Angeklickt" und "noch nicht angeklickt" zu sehen sind. Klickt man dann auf die Frage, verschwindet der überflüssige Reiter und es funktioniert, wie es soll.

    Ich blicks nicht wirklich, wäre dankbar für alle Hilfen!:oops: