Objekt per Mausklick anzeigen und schließen

[minestarm]

OK vielen Dank für den Code, funktioniert fast wunderbar ... komplett in eine HTML reingepackt und hochgeladen klappts,

aber da ich eine "Wordpress-Seite" habe ist das mit dem Code einbinden nicht so leicht, habs schließlich doch hinbekommen aber per Mausklick öffnen sich nicht die Antworten.

Die Antworten werden nicht angezeigt (lediglich die Fragen) daher müsste ja normalerweise das Javascript richtig eingebunden sein aber wie gesagt bei einem Mausklick passiert garnichts.

Hast du oder jemand Ahnung ob Wordpress irgendwas an diesem Javascript nicht mag:

<style type="text/css">  
body {  
    font-family: sans-serif;  
}  
  
/*  
Verstecke auf zugängliche Weise  
Siehe http://snook.ca/archives/html_and_css/hiding-content-for-accessibility  
*/  
.inactive .answer {  
	position: absolute !important;  
	height: 1px; width: 1px;  
	overflow: hidden;  
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */  
	clip: rect(1px, 1px, 1px, 1px);  
}  
  
.answer {  
	background-color: gray;  
	border: 1px solid black;  
}  
  
.js .question {  
    cursor: pointer;  
	background-color: lightgray;  
	border: 1px solid black;  
}  
</style>  
<script type="text/javascript">  
// Füge js-Klasse zum html-Element hinzu, damit wir Styles angeben können,  
// die nur greifen, wenn JavaScript aktiviert ist.  
document.documentElement.classList.add('js');  
  
// Führe eine Funktion beim erfolgreichen Laden der Seite aus  
document.addEventListener('DOMContentLoaded', function() {  
  'use strict';  
  
  // Konfiguration: Klassennamen  
  var questionClass = 'question';  
  var inactiveClass = 'inactive';  
  
  // Speichert das aktive qa-Element  
  var active;  
  
  // Schaltet die Sichtbarkeit eines qa-Elements um  
  var toggle = function(element) {  
    // Verstecke das aktive qa-Element  
    if (active && active != element) {  
        active.classList.add(inactiveClass);  
    }  
    // Toggle das angeklickte  
    element.classList.toggle(inactiveClass);  
    // Speichere das aktive in einer Variablen,  
    // damit wir es später verstecken können  
    active = element;  
  };  
  
  // Event-Handler für alle Klicks innerhalb der FAQ  
  var faqClick = function(event) {  
    // Greife auf das Ereignis-Zielelement zu und prüfe,  
    // ob es eine Frage ist (hat es die Klasse »question«?).  
    if (event.target.classList.contains(questionClass)) {  
      // Gehe zum Elternelement (dem qa-Element)  
      var element = event.target.parentNode;  
      // Schalte um  
      toggle(element);  
    }  
  };  
  // Registriere den click-Event-Handler beim gemeinsamen faq-Element.  
  // Hier kommen durch das Aufsteigen von Events alle Klick-Ereignisse an,  
  // daher können wir sie zentral überwachen, anstatt bei jedem question-Element einzeln  
  document.getElementById('faq').addEventListener('click', faqClick);  
  
  // Füge beim Laden der Seite allen qa-Elementen die Klasse »inactive« hinzu,  
  // um anfangs alle Antworten auszublenden.  
  var qas = document.querySelectorAll('.qa');  
  for (var i = 0, l = qas.length; i < l; i++) {  
    qas[i].classList.add(inactiveClass);  
  }  
});  
</script>  
  
<div id="faq">  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
<section class="qa">  
    <h2 class="question">Frage</h2>  
    <p class="answer">Antwort</p>  
</section>  
</div>

Bin langsam am verzweifeln diesen Code da ins Wordpress hineinzubekommen. Hier der Link zur Seite um die es geht: http://minestarm.lima-city.de/?page_id=410

MfG minestarm