MW - Klapptexte
Aus wissen.marko.toepperwien.de
FAQ-Seiten mit ausklappbarem Text in MediaWiki
In diesem Artikel lernst du, wie du ausklappbare Texte für FAQ-Seiten in MediaWiki erstellst. Diese Funktion ist besonders nützlich, um lange Inhalte kompakt darzustellen und dem Leser eine übersichtliche Navigation zu ermöglichen.
1. Einfache ausklappbare Abschnitte mit mw-collapsible
mw-collapsible
Mit der Klasse `mw-collapsible` kannst du einen Abschnitt ausklappbar machen. Hier ein Beispiel:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 1: Was ist MediaWiki?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: MediaWiki ist eine freie und offene Wiki-Software, die ursprünglich für Wikipedia entwickelt wurde und jetzt von vielen Projekten weltweit verwendet wird.</div>
</div>
Beispiel in der Seite:
Frage 1: Was ist MediaWiki?
Antwort: MediaWiki ist eine freie und offene Wiki-Software, die ursprünglich für Wikipedia entwickelt wurde und jetzt von vielen Projekten weltweit verwendet wird.
Erklärung:
- Der ``-Tag mit der Klasse `mw-collapsible` erstellt den ausklappbaren Bereich.
- Der Bereich wird durch Anklicken der Zeile „Frage 1: Was ist MediaWiki?“ ein- und ausgeklappt.
2. Ausklappbare Abschnitte mit standardmäßig eingeklappter Antwort
Du kannst auch festlegen, dass ein Abschnitt standardmäßig eingeklappt ist. Hier ein Beispiel:
<div class="mw-collapsible mw-collapsed" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 2: Wie installiere ich MediaWiki?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Du kannst MediaWiki auf deinem Webserver installieren, indem du die Software von der offiziellen MediaWiki-Website herunterlädst und den Installationsanweisungen folgst.</div>
</div>
Beispiel in der Seite:
Frage 2: Wie installiere ich MediaWiki?
Antwort: Du kannst MediaWiki auf deinem Webserver installieren, indem du die Software von der offiziellen MediaWiki-Website herunterlädst und den Installationsanweisungen folgst.
Erklärung:
- Die Klasse `mw-collapsed` sorgt dafür, dass der Abschnitt beim Laden der Seite eingeklappt ist.
3. Automatisch ausgeklappte Abschnitte beim Laden der Seite
Falls du möchtest, dass ein Abschnitt beim Laden der Seite bereits ausgeklappt ist, kannst du dies wie folgt einstellen:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 3: Wie erstelle ich eine neue Seite?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Um eine neue Seite zu erstellen, gib den gewünschten Seitennamen in die Suchleiste ein. Wenn die Seite nicht existiert, wirst du aufgefordert, sie zu erstellen.</div>
</div>
Beispiel in der Seite:
Frage 3: Wie erstelle ich eine neue Seite?
Antwort: Um eine neue Seite zu erstellen, gib den gewünschten Seitennamen in die Suchleiste ein. Wenn die Seite nicht existiert, wirst du aufgefordert, sie zu erstellen.
Erklärung:
- Ohne die `mw-collapsed`-Klasse wird der Abschnitt standardmäßig ausgeklappt.
4. Mehrere ausklappbare Abschnitte
Wenn du mehrere ausklappbare Abschnitte auf einer Seite benötigst, kannst du sie einfach hintereinander einfügen:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 4: Wie bearbeite ich eine Seite?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Klicke oben auf den Bearbeiten-Button, um die Seite im Bearbeitungsmodus zu öffnen und Änderungen vorzunehmen.</div>
</div>
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 5: Wie füge ich ein Bild ein?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Verwende den Syntax <nowiki>[[Datei:Bildname.jpg|mini|Bildbeschreibung]]</nowiki> um ein Bild einzufügen.</div>
</div>
Beispiel in der Seite:
Frage 4: Wie bearbeite ich eine Seite?
Antwort: Klicke oben auf den Bearbeiten-Button, um die Seite im Bearbeitungsmodus zu öffnen und Änderungen vorzunehmen.
Frage 5: Wie füge ich ein Bild ein?
Antwort: Verwende den Syntax [[Datei:Bildname.jpg|mini|Bildbeschreibung]] um ein Bild einzufügen.
Erklärung:
- Jeder Abschnitt funktioniert unabhängig voneinander.
- Diese Struktur eignet sich hervorragend für umfangreiche FAQ-Seiten.
5. Ausklappbare Abschnitte mit benutzerdefinierten Titeln
Du kannst den Titel für den ausklappbaren Abschnitt individuell gestalten, z.B. in verschiedenen Farben oder Schriftgrößen:
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="color: blue; font-size: 18px; text-align:left; width:100%;">Frage 6: Wie setze ich einen Link?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Verwende den Syntax <nowiki>[[Seitenname]]</nowiki> um einen internen Link zu erstellen, oder <nowiki>[http://example.com externe Seite]</nowiki> für externe Links.</div>
</div>
Beispiel in der Seite:
Frage 6: Wie setze ich einen Link?
Antwort: Verwende den Syntax [[Seitenname]] um einen internen Link zu erstellen, oder [http://example.com externe Seite] für externe Links.
Erklärung:
- Der Titel des Abschnitts kann durch das `style`-Attribut angepasst werden, z. B. in Blau mit größerer Schrift.
6. Ausklappbare Abschnitte mit Inhaltsverzeichnis
Wenn deine Seite viele ausklappbare Abschnitte enthält, ist ein Inhaltsverzeichnis hilfreich, das direkt zu den entsprechenden Abschnitten springt:
__TOC__
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 7: Wie verwende ich das Inhaltsverzeichnis?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Das Inhaltsverzeichnis erstellt automatisch Links zu allen Abschnitten der Seite. Du kannst es mit <nowiki>__TOC__</nowiki> einfügen.</div>
</div>
<div class="mw-collapsible" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">Frage 8: Wie erstelle ich Unterabschnitte?</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Verwende die Syntax <nowiki>== Überschrift ==</nowiki> für Hauptabschnitte und <nowiki>=== Unterüberschrift ===</nowiki> für Unterabschnitte.</div>
</div>
Beispiel in der Seite:
Frage 7: Wie verwende ich das Inhaltsverzeichnis?
Antwort: Das Inhaltsverzeichnis erstellt automatisch Links zu allen Abschnitten der Seite. Du kannst es mit __TOC__ einfügen.
Frage 8: Wie erstelle ich Unterabschnitte?
Antwort: Verwende die Syntax == Überschrift == für Hauptabschnitte und === Unterüberschrift === für Unterabschnitte.
Erklärung:
- Das Inhaltsverzeichnis wird automatisch anhand der vorhandenen Abschnitte generiert.
- Es ist besonders hilfreich bei längeren Seiten mit vielen FAQ-Punkten.
7. Ausklappbare Abschnitte mit "+" Symbol
Du kannst mit ein wenig CSS und JavaScript "+" und "-" Symbole einfügen. Hier ein Beispiel:
<div class="mw-collapsible mw-collapsed" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; width:100%;">
<span class="toggle-icon">[+]</span> Frage 7: Wie kann ich Symbole einfügen?
</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: Symbole kannst du durch das Hinzufügen von CSS und JavaScript in MediaWiki anpassen.</div>
</div>
<script>
$('.mw-collapsible-toggle').click(function(){
var content = $(this).next('.mw-collapsible-content');
if(content.is(':visible')){
$(this).find('.toggle-icon').text('[+]');
} else {
$(this).find('.toggle-icon').text('[-]');
}
});
</script>
Beispiel in der Seite:
Frage 7: Wie kann ich Symbole einfügen?
Antwort: Symbole kannst du durch das Hinzufügen von CSS und JavaScript in MediaWiki anpassen.
<script>
$('.mw-collapsible-toggle').click(function(){
var content = $(this).next('.mw-collapsible-content');
if(content.is(':visible')){
$(this).find('.toggle-icon').text('[+]');
} else {
$(this).find('.toggle-icon').text('[-]');
}
});
</script>
Erklärung:
- Das ``-Element wird verwendet, um das "+" Symbol anzuzeigen.
- Mit einfachem JavaScript wird das Symbol beim Ein- und Ausklappen geändert.
- 8. Ausklappbare Abschnitte mit einem Hinweistext ("Hier klicken, um die Antwort anzuzeigen")
Dieses Beispiel zeigt, wie du einen benutzerdefinierten Text wie "Hier klicken, um die Antwort anzuzeigen" einfügen kannst:
```mediawiki
8. Ausklappbare Abschnitte mit einem Hinweistext ("Hier klicken, um die Antwort anzuzeigen") und einer immer angezeigten Frage
Hier ist ein Beispiel, bei dem die Frage immer sichtbar ist und die Antwort ausgeklappt werden kann:
<div class="mw-collapsible mw-collapsed" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; cursor:pointer; width:100%;">
Frage 8: Wie verwende ich MediaWiki? <span class="toggle-text">Hier klicken, um die Antwort anzuzeigen</span>
</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">Antwort: MediaWiki ist eine leistungsstarke Software für das Erstellen und Verwalten von Wikis. Es wird unter anderem von Wikipedia verwendet.</div>
</div>
<script>
$(document).ready(function() {
$('.mw-collapsible-toggle').click(function() {
var content = $(this).next('.mw-collapsible-content');
var toggleText = $(this).find('.toggle-text');
if (content.is(':visible')) {
content.hide();
toggleText.text('Hier klicken, um die Antwort ein- und wieder auszublenden');
} else {
content.show();
toggleText.text('Hier klicken, um die Antwort ein- und wieder auszublenden');
}
});
});
</script>
Beispiel in der Seite:
Frage 8: Wie verwende ich MediaWiki? Hier klicken, um die Antwort anzuzeigen
Antwort: MediaWiki ist eine leistungsstarke Software für das Erstellen und Verwalten von Wikis. Es wird unter anderem von Wikipedia verwendet.
<script>
$(document).ready(function() {
$('.mw-collapsible-toggle').click(function() {
var content = $(this).next('.mw-collapsible-content');
var toggleText = $(this).find('.toggle-text');
if (content.is(':visible')) {
content.hide();
toggleText.text('Hier klicken, um die Antwort ein- und wieder auszublenden');
} else {
content.show();
toggleText.text('Hier klicken, um die Antwort ein- und wieder auszublenden');
}
});
});
</script>
Erklärung:
- Die Frage „Wie verwende ich MediaWiki?“ wird immer angezeigt.
- Der Hinweis „Hier klicken, um die Antwort anzuzeigen“ wird eingeblendet.
- Beim Klick auf den Hinweistext wird die Antwort angezeigt und der Text ändert sich zu „Hier klicken, um die Antwort auszublenden“.
- Der JavaScript-Code sorgt dafür, dass der Text je nach Sichtbarkeit des Inhalts korrekt wechselt.
9. Ausklappbare Abschnitte mit "+" und "-" Symbolen
Hier ist ein Beispiel, bei dem das Symbol `+/-` als klickbarer Link dargestellt wird, und die Frage immer sichtbar ist:
<div class="mw-collapsible mw-collapsed" style="width:100%;">
<div class="mw-collapsible-toggle" style="text-align:left; cursor:pointer; width:100%;">
[+/-] Frage 9: Wie kann ich Symbole einfügen? <span style="color:blue; text-decoration:underline;"></span>
</div>
<div class="mw-collapsible-content" style="text-align:left; width:100%;">
Antwort: Symbole kannst du durch das Hinzufügen von CSS und JavaScript in MediaWiki anpassen.
</div>
</div>
<script type="text/javascript">
document.querySelectorAll('.mw-collapsible-toggle').forEach(function(toggle) {
toggle.addEventListener('click', function(e) {
e.preventDefault();
var content = toggle.nextElementSibling;
if (content.style.display === "none" || content.style.display === "") {
content.style.display = "block";
toggle.innerHTML = "[-] Frage 9: Wie kann ich Symbole einfügen? <span style='color:blue; text-decoration:underline;'></span>";
} else {
content.style.display = "none";
toggle.innerHTML = "[+] Frage 9: Wie kann ich Symbole einfügen? <span style='color:blue; text-decoration:underline;'></span>";
}
});
});
</script>
Beispiel in der Seite:
[+/-] Frage 9: Wie kann ich Symbole einfügen?
Antwort: Symbole kannst du durch das Hinzufügen von CSS und JavaScript in MediaWiki anpassen.
<script type="text/javascript">
document.querySelectorAll('.mw-collapsible-toggle').forEach(function(toggle) {
toggle.addEventListener('click', function(e) {
e.preventDefault();
var content = toggle.nextElementSibling;
if (content.style.display === "none" || content.style.display === "") {
content.style.display = "block";
toggle.innerHTML = "[-] Frage 9: Wie kann ich Symbole einfügen? <span style='color:blue; text-decoration:underline;'></span>";
} else {
content.style.display = "none";
toggle.innerHTML = "[+] Frage 9: Wie kann ich Symbole einfügen? <span style='color:blue; text-decoration:underline;'></span>";
}
});
});
</script>
Zusammenfassung
In diesem Artikel hast du gelernt, wie du ausklappbare Abschnitte in MediaWiki erstellst und diese für FAQ-Seiten oder ähnliche Inhalte verwenden kannst. Durch die Kombination verschiedener Stile und Funktionen kannst du deine Seite nicht nur benutzerfreundlich, sondern auch optisch ansprechend gestalten.
Nutze die bereitgestellten Beispiele, um deine eigene FAQ-Seite zu erstellen und deinen Nutzern eine klare und interaktive Möglichkeit zu bieten, Antworten auf ihre Fragen zu finden.
