MW - Klapptexte

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

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 "+" und "-" Symbolen

Hier ist ein weiteres Beispiel mit "+" und "-" Symbolen, die als klickbare Links dargestellt werden:

<div class="mw-collapsible mw-collapsed" style="width:100%;">
  <div class="mw-collapsible-toggle" style="text-align:left; width:100%;">
    <a href="#" class="toggle-icon" style="text-decoration:none;">[+]</a> Frage 7: Wie kann ich Symbole einfügen?
  </div>
  <div class="mw-collapsible-content" style="text-align:left; width:100%; display:none;">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;
        var iconElement = toggle.querySelector('.toggle-icon');
        if (content.style.display === "none") {
            content.style.display = "block";
            iconElement.textContent = '[-]';
        } else {
            content.style.display = "none";
            iconElement.textContent = '[+]';
        }
    });
});
</script>

Beispiel in der Seite:

   <a href="#" class="toggle-icon" style="text-decoration:none;">[+]</a> Frage 7: 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;
       var iconElement = toggle.querySelector('.toggle-icon');
       if (content.style.display === "none") {
           content.style.display = "block";
           iconElement.textContent = '[-]';
       } else {
           content.style.display = "none";
           iconElement.textContent = '[+]';
       }
   });

}); </script>

8. Ausklappbare Abschnitte mit einem Hinweistext 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" id="faq-8" style="width:100%;">
  <div class="mw-collapsible-toggle" style="text-align:left; cursor:pointer; width:100%;">
    Frage 8: Wie verwende ich MediaWiki? <span style="color:blue; text-decoration:underline;">Hier klicken, um die Antwort anzuzeigen oder wieder auszublenden</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>

Beispiel in der Seite:

   Frage 8: Wie verwende ich MediaWiki? Hier klicken, um die Antwort anzuzeigen oder wieder auszublenden

   Antwort: MediaWiki ist eine leistungsstarke Software für das Erstellen und Verwalten von Wikis. Es wird unter anderem von Wikipedia verwendet.

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.