Vorlage:Hidden

Aus Offene Naturführer
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Benutzung

Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-Verweis auf der rechten Seite. Hier lässt sich dann weiterer Text-Inhalt aussblenden, wenn man auf ▼ drückt.

Optionale Vorlagen-Parameter

  • style - zusätzliches CSS zum Haupt-<div>
  • headerstyle - CSS Angaben für die Infozeile (Kopf)
  • contentstyle - CSS für den eigentlichen Inhalt
  • contentclass - CSS Klasse für den eigentlichen Inhalt
  • toggle - 'left' ▼ dann links.


Beispiele

Öffnen/schließen: (+) [+] ▼ …

{{Hidden|1=Titel |2=Inhalte}} ergibt…

▼▲
Titel


{{Hidden|1='''Titel''' |2=Inhalte | switcher = plusminus[]}} ergibt…

[+][−]
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = plusminus()}} ergibt…

(+)(−)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text}} ergibt…

(mehr…)(weniger anzeigen)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …}} ergibt…

(anzeigen …)(weniger anzeigen)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …/verbergen}} ergibt…

(anzeigen …)(verbergen)
Titel


Tabellenzeilen können mit dem Parameter collapse = table row eingeklappt werden, jedoch muß HTML-Syntax verwendet werden: 

<table class="wikitable">
<tr>
<td> 1. Zeile </td>
<td> 1. Zeile </td>
</tr>
<!-- eigenständige Tabellenzeile! -->
{{Hidden
| collapse = table row
| 1 = <td colspan="2">Titel</td>
| 2 = <td >Spalte 1</td><td >Spalte 2</td>
}}
<tr>
<td> letzte Zeile </td>
<td> letzte Zeile </td>
</tr>
</table>

ergibt…

1. Zeile 1. Zeile
▼▲
Titel
letzte Zeile letzte Zeile

Ausrichtung 

{{Hidden
 | toggle      = left
 | headerstyle = text-align:left;
 | 1 = Formatierung mit toggle=left und text-align:left;
 | 2 = Viel Text, viel Text…
}}

…ergibt…

▼▲
Formatierung mit toggle=left und text-align:left;

Ränder/Einrückung

Wikieinrückung mit „:“ 

:{{Hidden
 | style       = border:1px dotted black;padding:0.25em;
 | contentstyle= border-top:1px dotted;padding:0.25em;
 | 1 = {{Logo | Typ= Tip | Höhe = 14px}} &nbsp; Titel 
 | 2 = Viel Text, viel Text…
}}

ergibt:

▼▲
Tipps   Titel


{{Hidden
 | style        = margin-left:10%; margin-right:10%;border:1px solid #fcaf3e;border-radius:4px;
 | switcher     = plusminus()
 | headerstyle  = background:#fcaf3e;padding:0.25em;text-align:left;
 | contentstyle = background:#fce94f; color:blue;border:1px solid #fcaf3e;padding:0.25em;
 | 1 = „Zentriert“ mit Randangabe links-rechts
 | 2 = Viel Text, viel Text…
}}

ergibt:

(+)(−)
„Zentriert“ mit Randangabe links-rechts + runder Rahmen (moderne Browser)


Wikisyntax nutzen

Um z.B. eine Liste innerhalb zu erzeugen, muß man in die Trickkiste greifen und für den Inhalts-Parameter 2 „leeren“ Inhalt zuerst mit <span> übergeben: 

{{Hidden
 | style        = width: 50%;
 | switcher     = plusminus()
 | headerstyle  = background:#d3daed;padding:0.25em;text-align:left;
 | contentstyle = background:#f6f8fc; color:blue;border:1px solid #d3daed;padding:0.25em;
 | 1 = Titel
 | 2 = <span></span><!-- Trick: kein Inhalt -->
* Viel Text, viel Text…
}}

ergibt:

(+)(−)
Titel

Technische Anmerkungen

Mit den optionalen Parametern switcheropen oder switcherclose lassen sich auch kleine Bilder statt Text zum Öffnen/Schließen einbinden.

Die Vorlage nutzt <div>-Elemente oder Tabellenzeilen (<tr>) mit vordefinierten CSS-Klassen in folgender Schachtelung: 

div.collapsebox
  ├ div.switcher (-> floating)
  ├ div.collapsetitle
  └ div.collapsecontent

tr.collapsebox
  └ th/td
      ├ div.switcher (-> floating)
      └ div.collapsetitle
tr.collapsecontent

Wiki-Mechanismus

Normal

div.mw-collapsible[.mw-collapsed]
 └─ div.mw-collapsible-content

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Mit anderem Klapp-Text (nur HTML 5), wobei der Klick-Schalter immer rechts bleibt. 

div.mw-collapsible[.mw-collapsed]}} & data-expandtext="+" data-collapsetext="–"
 └─ div.mw-collapsible-content

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Ferngesteuert

· span.mw-customtoggle-myID

div.mw-collapsible mw-collapsed id="mw-customcollapsible-myID"
 └─ div.mw-collapsible-content

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Mit Benutzung von data-expandtext="…" data-collapsetext="…"

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Quelle: http://offene-naturfuehrer.de/web/Vorlage:Hidden
Meine Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Portale
Mitarbeit
Werkzeuge
Schwesterprojekte