Plugin: Expandcontract_XH - Community-Projekt ???

[cmss]

Eine weitere Variante wäre ein Hover-Accordion wie Codepen https://codepen.io/rolandfarkas/pen/Jjrmjyz.
Das Hover müsste man zeitlich etwas verlängern, sonst ist es zu flatterig.
(( Hier mal ein interessantes Styling https://codepen.io/igor-dev-18/pen/wvrWGyZ ohne Balken))

[frase]

Eine weitere Variante wäre ein Hover-Accordion ...

Ich hatte es schon weiter oben erwähnt:
Durch die Möglichkeit eigene Stylesheet-Dateien zu verwenden, steht jedem frei etwas völlig anderes zu kreieren.
Und ich wäre sogar froh, wenn du uns hier einen Vorschlag liefertest. Den könnte ich in die Demo einfügen.
Also: Wir erwarten eine "cmss-vorschlag.css"

[cmss]

Ich hoffe es bis morgen fertig zu bekommen.
Etwas ungewöhnlich ist es, dass das Accordion kein einhüllendes DIV hat (Beispielseiten) bzw. das div keine Klasse hat, und daß die einzelnen Unter-Divs keine Klassen haben (zumindest bei Bespielseiten, bei den Varianten class=expandarea für den Hintergrund bzw. p.expand_link für den Balken und expand_content für den Inhalt).

Das erschwert das Nachstylen für einige User doch ziemlich, und dafür ein allgemeines cmss-css zu entwicklen...
* Ich habe das mal anders eingebettet (für : Beispielseiten, das ich benutze)
<div class="expand_area">
<div class="ex0">{{{expand '','','','','','1'}}}</div>
<div class="ex1">{{{expand '','','','','','1'}}}</div>
</div>

[frase]

Etwas ungewöhnlich ist es, dass das Accordion kein einhüllendes DIV hat ...

Außer bei Variante 3 - wo immer nur einzelne Seiten aufgerufen werden - haben die Accordions immer <div class="expand_area"> drumherum. Die Links selbst haben dann <a ... class="linkBtn" ...> oder (bei Buttons) <form class="expand_button" ...> und die Aufklappbereiche haben immer <div class="expand_content ...">
Damit ist so ziemlich alles möglich.
Du kannst dir ja die beiden example-Dateien kopieren und dann ändern.

* Ich habe das mal anders eingebettet (für : Beispielseiten, das ich benutze)

Hm, vermutlich wäre das gar nicht nötig, da könntest du Variante 2 verwenden und als ersten Parameter die gewünschten Seiten eintragen.
Falls du im Accordion andere Titel haben möchtest, könntest du diese als Liste in Parameter 2 eintragen.

Na ja, ich bin mal gespannt

[cmss]

Die Klassen des "anders einbetten" brauche ich bei "Beispielseiten".
Obiges ex0...ex111 kann man bei Beispielseiten nicht durch expand_link ersetzen, das das div hier auch den content umgibt.
Ich werde mal Variante 2 versuchen. Variante 3 ist so schlecht stylebar.

Am besten wäre eine Konfiguration, die alle Varianten einstellbar macht.
Die "Hilfe" müsste dazu noch detailliert werden(Hoffentlich verstehen das auch gewöhnliche Benutzer.).

P.S Im Anhang : example3.zip (auch nicht viel besser, aber etwas anders)

[frase]

P.S Im Anhang : example3.zip (auch nicht viel besser, aber etwas anders)

Siehe:
http://fhs.bplaced.net/expandcontract_x ... l-von-cmss

[cmss]

Ich wollte eigentlich obigen farbigen Codepen umsetzen, aber es gibt kein Div um jede Sektion. Man könnte in meinem Css den Seitenbalken grau machen und vor jeder Überrschrift ein Plus mit Rand oder einen Kreis machen ähnlich wie bei einer Timeline.( Anhang : Example 4)

[Holger]

P.S Im Anhang : example3.zip (auch nicht viel besser, aber etwas anders)

Siehe:
http://fhs.bplaced.net/expandcontract_x ... l-von-cmss

Sieht doch gar nicht so schlecht aus .

Ist das

Code: Select all

.expand_area {padding-left: 2rem !important;}

und der daraus resultierende weiße Bereich links Absicht?

[Holger]

Ich wollte eigentlich obigen farbigen Codepen umsetzen, aber es gibt kein Div um jede Sektion.

Zusätzlich ein eindeutiges div um jede Sektion wäre schon ziemlich speziell, denke ich. Eventuell ist das aber mittels Pseudo - Klassen (Berechnungen) machbar.

[frase]

Ich wollte eigentlich obigen farbigen Codepen umsetzen, aber es gibt kein Div um jede Sektion. Man könnte in meinem Css den Seitenbalken grau machen und vor jeder Überrschrift ein Plus mit Rand oder einen Kreis machen ähnlich wie bei einer Timeline.( Anhang : Example 4)

Zusätzlich ein eindeutiges div um jede Sektion wäre schon ziemlich speziell, denke ich. Eventuell ist das aber mittels Pseudo - Klassen (Berechnungen) machbar.

Und sie dreht sich doch ...
Ähm, ich meinte, es geht doch.
http://fhs.bplaced.net/expandcontract_x ... Beispiel-5
Das ist natürlich in dieser Demo ziemlich problematisch, weil sich hier gleich 3 Stylesheets überlagern.
Da kommt recht häufig !important vor.
In einer eigenen Installation kann man sein Stylesheet in der Plugin-Konfiguration eintragen - und gut is.

Ach, und schwierig ist auch die switch-light-dark-Sache. Man muss dann bei "dark" dafür sorgen, dass der Text überhaupt lesbar bleibt.