WBCE CMS Forum

kleo

Member

Erstellen einer Liste mit der Möglichkeit Details anzusehen

Moin,

ich möchte eine Liste mit der Bezeichnung und einer kurzen Beschreibung erstellen, wo beim Click eine lange Beschreibung erscheinen soll.
Der Sinn der Sache ist die gesammte Liste kompakt darzustellen mit der Möglichkeit beim ausgewählten Beitrag Details anzusehen.

Ich habe gedacht dafür das Modul MEMBERS zu verwenden.
Damit lassen sich solche Listen erstellen und pflegen, die Darstellung kann relativ leicht angepasst werden.

Wie kann ich aber machen, dass z.B. den Inhalt des LONG1 erst beim Bedarf (drauf Klicken) einzublenden?

byteworker

Member

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

Du kannst auch das Accordion Modul verwenden. Dann ist die kurze Beschreibung eher nur ein Satz o. ein Schlagwort.

https://addons.wbce.org/pages/addons.ph … em&item=15

---

= Templates für WBCE

florian

Administrator

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

jquery toggle
https://www.jqueryscript.net/plus/searc … ord=toggle

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Member

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

Danke für Eure Vorschläge!

Ich habe gleich mit dem Droplet toogle probiert, leider geht es nur, wenn Droplet nur einmal auf der Seite verwendet wird.

Die Module Akkordion und Ziehharmonika habe ich auch in Betracht genommen, die passen aber weniger dafür.

Da bleibt dann nur das Modul NWI mit der Anpassung der Listenausgabe...

florian

Administrator

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

...oder eben Members.

---

Code allein macht nicht glücklich. Jetzt spenden!

jean

Member

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

... oder einfacher

[== HTML ==]
<details>
  <summary><h1 style="display:inline-block;">Hallo Welt</h1>
  <p>... was ist das?</p>
  </summary>
  <p>Ein Hallo-Welt-Programm ist ein kleines Computerprogramm, das auf möglichst einfache Weise zeigen soll, welche Anweisungen oder Bestandteile für ein vollständiges Programm in einer Programmiersprache benötigt werden, und somit einen ersten Einblick in die Syntax gibt.</p>
</details>

bernd

Developer

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

...und dann einfach den Vorschlag von Jean in Members im Feld "Eintrag" mit den passenden Platzhaltern kombinieren und feddisch ;-)

z.B. so:

<details>
<summary>
<img src="[PICTURE]" width="100" alt="[NAME]" />
<h3 style="display:inline-block;">[NAME]</h3>
</summary>
{LONG1}
</details>

---

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

florian

Administrator

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

Das ist ja cool.
Damit noch außer dem Titel die Beschreibung angezeigt wird:

<details>
<summary>
<h3>[NAME]</h3>
{SHORT1}
</summary>
{LONG1}
</details>

Und damit's ein bisschen schöner aussieht, in der Kopfzeile z.B. noch:

<style>
details {margin-bottom:1em}
summary:hover {cursor:pointer}
summary h3 {display:inline-block; margin:0}
</style>

Laut caniuse kann man das bedenkenlos verwenden. Wer jetzt noch den IE 11 benutzt, dem ist eh nicht mehr zu helfen.

---

Code allein macht nicht glücklich. Jetzt spenden!

kleo

Member

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

Super !
Es ist so geil!

Einfach nur KLASSE !

Last edited by kleo (17.04.2023 21:19:19)

kleo

Member

Re: Erstellen einer Liste mit der Möglichkeit Details anzusehen

So was am besten als Preset abspeichern