Hallo zusammen,
ich hatte vor kurzem nach einer Möglichkeit gesucht Container via Mausklick aufklappen zu lassen (z.B: FAQ) aber ohne auf JavaScript zurückzugreifen (reine CSS-Lösung). Mit JS gibt es ja gute PlugIns hier im Archiv.
Da ich im Forum keine Lösung gefunden habe, möchte ich euch meine gefundene Lösung hier lassen.
Um das Ganze so benutzerfreundlich wie möglich zu gestalten, habe ich es als eigenes Sytnaxelement umgesetzt.
der SPAN-Tag ist nur ein Anker, damit ich durch Klicken auf den Link den "Container" sowohl ein- als auch ausblenden kann. Der Anhang "_10" ist frei wählbar.
{DESCRIPTION} ist die Frage (=Link)
{VALUE} ist die Antwort. Absätze, Formatierungen etc. sind problemlos möglich.
Am Ende ist noch eine optionale Sprungmarke eingebaut, die zum Anfang der Frage führt.
Dazu wird noch der folgende CSS-Code benötigt:
In der Inhaltsseite wird es dann wie folgt eingebunden:
Ein Beispiel könnt ihr hier sehen:
http://dbbj.saarland/index.php?cat=Verschiedenes&page=Beispiel%20FAQ
Falls noch jemand Verbesserungsvorschläge hat, ich bin ganz Ohr.
ich hatte vor kurzem nach einer Möglichkeit gesucht Container via Mausklick aufklappen zu lassen (z.B: FAQ) aber ohne auf JavaScript zurückzugreifen (reine CSS-Lösung). Mit JS gibt es ja gute PlugIns hier im Archiv.
Da ich im Forum keine Lösung gefunden habe, möchte ich euch meine gefundene Lösung hier lassen.
Um das Ganze so benutzerfreundlich wie möglich zu gestalten, habe ich es als eigenes Sytnaxelement umgesetzt.
Code Auswählen
ausklappbarer_Container_FAQ =
<span id="{DESCRIPTION}_10"><span>
<div class="FAQtab" id="{DESCRIPTION}">
<div class="FAQshow"><a href="#{DESCRIPTION}">{DESCRIPTION}</a></div>
<div class="FAQhide"><a href="#{DESCRIPTION}_10">{DESCRIPTION}</a></div><div class="FAQcontent">{VALUE}<br /><br />
<a href="{BASE_URL}index.php?cat={CATEGORY_NAME}&page={PAGE_NAME}#{DESCRIPTION}" title="Zum Seitenanfang"><img src="{LAYOUT_DIR}/grafiken/seitenanfang.png" style="position:relative; float:right; margin-right:25px;" /></a></div></div>der SPAN-Tag ist nur ein Anker, damit ich durch Klicken auf den Link den "Container" sowohl ein- als auch ausblenden kann. Der Anhang "_10" ist frei wählbar.
{DESCRIPTION} ist die Frage (=Link)
{VALUE} ist die Antwort. Absätze, Formatierungen etc. sind problemlos möglich.
Am Ende ist noch eine optionale Sprungmarke eingebaut, die zum Anfang der Frage führt.
Dazu wird noch der folgende CSS-Code benötigt:
Code Auswählen
div.FAQtab:not(:target) div.FAQcontent, div.FAQtab:target div.FAQshow, div.FAQtab div.FAQhide {
display: none;
}
div.FAQtab:target div.FAQcontent, div.FAQtab:target div.FAQhide {
display: block;
}
.FAQcontent {
margin-top:10px;
}In der Inhaltsseite wird es dann wie folgt eingebunden:
Code Auswählen
[ausklappbarer_Container_FAQ=Frage|Antwort]Ein Beispiel könnt ihr hier sehen:
http://dbbj.saarland/index.php?cat=Verschiedenes&page=Beispiel%20FAQ
Falls noch jemand Verbesserungsvorschläge hat, ich bin ganz Ohr.
