forum.mozilo.de das Supportforummozilo Forum
Willkommen Gast. Bitte einloggen oder registrieren. Haben Sie Ihre Aktivierungs E-Mail übersehen?

Einloggen mit Benutzername, Passwort und Sitzungslänge

Autor Thema: Aufklappbare Container ohne JavaScript  (Gelesen 684 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

 

Offline Broac

  • Mitglied
  • *
  • Beiträge: 79
    • Profil anzeigen
Aufklappbare Container ohne JavaScript
« am: 13. Februar 2017, 08:53:13 »
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. :-)
 

 

Offline Broac

  • Mitglied
  • *
  • Beiträge: 79
    • Profil anzeigen
Re: Aufklappbare Container ohne JavaScript
« Antwort #1 am: 13. Februar 2017, 10:02:20 »
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;
« Letzte Änderung: 13. Februar 2017, 10:05:30 von Broac »
 

 

Offline djr

  • Mitglied
  • *
  • Beiträge: 413
    • Profil anzeigen
Re: Aufklappbare Container ohne JavaScript
« Antwort #2 am: 14. Februar 2017, 15:27:34 »
@Broac:
Danke für den Tipp!

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.

Am 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.
 

 

Offline Thorstn

  • Mitglied
  • *
  • Beiträge: 669
    • Profil anzeigen
    • Mensch, Musiker, Webdesigner - Thorsten aus Bochum
Re: Aufklappbare Container ohne JavaScript
« Antwort #3 am: 14. Februar 2017, 17:09:57 »
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.
moziloCMS-Layouts auf mozilo-layouts.thorstn.com
webdesign-ruhr.de - Webdesign aus Bochum
 

 

Offline Broac

  • Mitglied
  • *
  • Beiträge: 79
    • Profil anzeigen
Re: Aufklappbare Container ohne JavaScript
« Antwort #4 am: 15. Februar 2017, 10:57:33 »
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
 

 

Offline djr

  • Mitglied
  • *
  • Beiträge: 413
    • Profil anzeigen
Re: Aufklappbare Container ohne JavaScript
« Antwort #5 am: 15. Februar 2017, 15:25:34 »
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.