Die Datei example1.css wurde bereits auf den Seiten Variante 1 bis 3 verwendet. Zur Anpassung an die eigene Website können die Farben der Links, der Buttons und der Schriften bequem in der CSS-Datei über CSS-Variablen (custom properties) gesteuert werden. Die Variablennamen sollten selbsterklärend sein, als Farb-Werte sind alle validen CSS-Farbangaben erlaubt.
Hier nur noch ein Anwendungsbeispiel mit Parameterangaben.
{{{expand 'show-close = off','first-open = on'}}}
Der erste Content wird beim Seitenaufruf sofort geöffnet. Die Schließen-Buttons sind ausgeblendet.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
{{{expand 'show-close = off','show-inline = on','headlines = F 1, F 2, F 3, F 4'}}}
Die Expand-Buttons sind nebeneinander angeordnet. Die Schließen-Buttons sind ausgeblendet. Die Linktexte (Headlines) sind ersetzt.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat.
