Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Aufklappbare Container ohne JavaScript

Begonnen von Broac, 13. Februar 2017, 08:53:13

« vorheriges - nächstes »

Broac

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.

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}&amp;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:

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:

[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. :-)

Broac

#1
Noch ein Nachrag: Mir ist gerade aufgefallen, dass in der Frage keine Anführungszeichen stehen dürfen, sonst der Container nicht aufklappt, da das HTML "zerrupft" wird:

<span><div class="tab" id="Was ist zu tun, wenn man einen Beleg ablehnen möchte, diesen aber in der Anwendung " belege="" prüfen"="" nicht="" einsehen="" kann?"="">

Ich habe mir erstmal mit einem weiteren, eigenen Sytnaxelement beholfen:

Anfuehrungszeichen = &quot;

djr

@Broac:
Danke für den Tipp!

Zitat von: Broac am 13. Februar 2017, 08:53:13
Falls noch jemand Verbesserungsvorschläge hat, ich bin ganz Ohr. :-)

Als ID sollte nicht die Frage selbst benutzt werden. Da eine ID u.a. keine Leerzeichen beinhalten darf.

So wie der "Schließen"-Mechanismus gebaut ist, steht die Frage zwei mal im Text.
Man könnte ihn auch weg lassen. Beim Öffnen einer anderen Frage schließt sich die vorherige eh.

Zitat von: Broac am 13. Februar 2017, 08:53:13Am Ende ist noch eine optionale Sprungmarke eingebaut, die zum Anfang der Frage führt.

Hier reicht als Adresse #{DESCRIPTION}.
Und der title-Text "Zum Seitenanfang" ist falsch, da der Link zum Anfang der Frage führt.

Thorstn

Jau, Danke @ Broac für den Tipp, werde ich die Tage mal ausprobieren  :)

OffTopic: In Deinem Layout hast Du in der template.html einen Validierungs-Fehler: das Bild für das responsive Menü (png) wird nicht abgeschlossen, da fehlt vor dem </a> noch das LEERZEICHEN/>

Grüße aus Bochum,
Thorsten
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

Broac

Hallo Ihr beiden, danke für eurer Feedback

@Thorstn: Ich habe die template.html nochmal validiert.

@djr
Ich kann keine zwei Fragen auf der Seite erkennen (außer der CSS-Code fehlt), wobei ich das beim ersten Mal auch hatte (zwei Fragen untereinander) und nach einem Aktualisieren der Seite, war die zweite Frage weg. Keine Ahnung warum, habe es jedenfalls auf Chrome, FF und IE11 getestet und da funktioniert es, zumindest bei mir. Lasse ich den "Hide-Teil" weg, dann fehlt mir in dieser Variante nach dem Aufklappen auch die dazugehörige Frage.

Ich hahe mir eine Lösung erarbeitet mit der ich das Validitäts-Problem mittels PHP und dem mozilo-PHP-Plugin gelöst habe:

ausklappbarer_Container_FAQ = {PHP|echo '<div id="',str_replace(' ', '_', '{DESCRIPTION}'),'_hide"></div><div class="FAQtab" id="',str_replace(' ', '_', '{DESCRIPTION}'),'_show"><div class="FAQshow"><a href="{BASE_URL}index.php?cat={CATEGORY_URL}&amp;page={PAGE_URL}#',str_replace(' ', '_', '{DESCRIPTION}'),'_show">{DESCRIPTION}</a></div><div class="FAQhide"><a href="{BASE_URL}index.php?cat={CATEGORY_URL}&amp;page={PAGE_URL}#',str_replace(' ', '_', '{DESCRIPTION}'),'_hide">{DESCRIPTION}</a></div><div class="FAQcontent">{VALUE}<br /><br /><a href="{BASE_URL}index.php?cat={CATEGORY_URL}&amp;page={PAGE_URL}#',str_replace(' ', '_', '{DESCRIPTION}'),'_show" title="Zum Anfang der Frage"><img src="{LAYOUT_DIR}/grafiken/seitenanfang.png" alt="" style="position:relative; float:right; margin-right:25px; margin-top:10px;" /></a></div></div>';}


Sieht fieß aus (ist es vielleicht auch^^) aber funktioniert. Mittels PHP-Funktion wird bei den ID's und Links das Leerzeichen durch einen Unterstrich ersetzt. Die Ausgabe auf dem Webserver ist wie gewünscht und der W3-HTML-Checker meckert diesbezüglich auch nicht.

Damit es funktioniert musste ich noch das eigene Syntaxelement für die Anführugszeichen ändern:

Anfuehrungszeichen = {PHP|echo '&quot';}

Die alte Schreibweise ohne PHP-Plugin hat den Link-Tag zerstört.

Die Links sind selbst gebaut, damit auch die Leerzeichen im Name der Seite oder Kategorie entfernt werden.

Alles andere übersteigt leider meine Kenntnisse.

Viele Grüße,
Michael

djr

Zitat von: Broac am 15. Februar 2017, 10:57:33
Ich kann keine zwei Fragen auf der Seite erkennen (außer der CSS-Code fehlt)
Das meinte ich.
Wichtig ist was im Text steht. Style sollte nur den Inhalt zugänglicher (z.B. einfacher zu überblicken) machen.