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 Standardsymbolen

MediaWiki bietet auch standardisierte Symbole zum Ein- und Ausklappen. Hier ein Beispiel:

<div class="mw-collapsible" 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:

• Standardmäßig wird das Symbol „[+]“ zum Ein- und „[-]“ zum Ausklappen verwendet.
• Dies ist nützlich, um eine einfache und einheitliche Darstellung zu gewährleisten.

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 mw-collapsed" 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:

• Die Klasse `mw-collapsed` sorgt dafür, dass der Abschnitt standardmäßig ausgeklappt ist.

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.

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.