Hey,
ich hab schon einiges probiert aber bin bis jetzt noch nicht wirklich zu einer Lösung gekommen. Habe folgende Seite mit einem style-Bereich, einem script-Bereich und dem letztendlichen HTML:
HTML
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>Wie bekomme ich jetzt die Seite mit genau dem CSS und einem funktionierenden Script in eine Wordpress Seite eingefügt ?
Sollte denke ich nicht allzu kompliziert/schwierig sein bin dennoch über jede Hilfe dankbar.
MfG minestarm
