Wenn ich das Script hätte dann würde ich das schon hinkriegen. Hast du eventuell einen Link dazu? Die Suche ergab nichts.

@vikkiv

Wenn ich das Script hätte dann würde ich das schon hinkriegen

Unter dem Stichwort "Accordion" findest du im WWW zahlreiche Demos und Infos zu deinem Klapptext Problem.
Schau dir z. B. mal diese Seite an, da hat der Autor 6 verschiedene Beispiele angelegt, zu denen du auch den passenden Scriptcode herunterladen kannst...

Für den Einsatz im WD sind nur geringfügige Anpassungen nötig, damit das "Accordion" auch auf einer mobilen Variante funktioniert.
So kann der angepasste Scriptcode für die Desktop Variante aussehen:

<!-- die folgenden Zeilen in den HTML Head eines Platzhalters in der Desktop Variante speichern-->

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <style>
  #accordion-resizer {
    padding: 10px;
    width: 500px;
    height: 300px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
      heightStyle: "fill"
    });
   });
  </script>
  <!-- Ende des Head Bereichs-->
 
  <!-- die folgenden Zeilen in den HTML Body eines Platzhalters in der Desktop Variante speichern-->
    
    <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
    </div>
    <h3><b style="font-size: 11pt;">Section 3</b></h3>
    <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
      <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3><b style="font-size: 11pt;">Section 4</b></h3>
    <div>
      <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
  </div>
</div>
<!-- Ende des Body Bereichs-->

Und so sieht er für die mobile Variante aus:

<!-- die folgenden Zeilen in den HTML Head eines Platzhalters in der mobilen Variante speichern-->  

 <style>
  #accordion-resizer_m {
    padding: 10px;
    width: 350px;
    height: 600px;
  }
  </style>
  <script>
  $( function() {
    $( "#accordion_m" ).accordion({
      heightStyle: "fill"
    });
   });
  </script>
  <!-- Ende des Head Bereichs-->
 
  <!-- die folgenden Zeilen in den HTML Body eines Platzhalters in der mobilen Variante speichern-->
    
<div id="accordion-resizer_m" class="ui-widget-content">
  <div id="accordion_m">
    <h3><b style="font-size: 13pt;">Section 1</b></h3>
    <div>
      <p style="font-size: 13pt;">Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3><b style="font-size: 13pt;">Section 2</b></h3>
    <div>
      <p style="font-size: 13pt;">Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
    </div>
    <h3><b style="font-size: 13pt;">Section 3</b></h3>
    <div>
      <p style="font-size: 13pt;">Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
      <ul style="font-size: 13pt;">
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3><b style="font-size: 13pt;">Section 4</b></h3>
    <div>
      <p style="font-size: 13pt;">Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p style="font-size: 13pt;">Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
  </div>
</div>
<!-- Ende des Body Bereichs-->

Die o. a. Scriptcodes kannst du 1:1 mit copy & paste übernehmen und sie, wie im Scriptcode angemerkt, in die Head und Body Bereiche der Platzhalter in den Varianten übernehmen.
Die Übernahme des Scriptcodes für den HTML Head eines Platzhalters in der Desktop Variante kann so aussehen:

Auf der Website sieht das dann so aus (Desktop + Smartphone)

Probier's mal und wenn du noch Fragen hast, nur her damit 🙂

Hey, vielen Dank für die Super Anleitung. Ich habe es eingefügt und angepasst. War etwas tricky aber letztendlich hat es gut geklappt. Interessant wäre es zu wissen wie man die blaue Farbe aus dem Balken oben weg kriegen kann bzw. in eine andere Farbe tauschen? Ein virtuelles Bier für dich geht auf mich. 🍻

@vikkiv

Interessant wäre es zu wissen wie man die blaue Farbe aus dem Balken oben weg kriegen kann

Das ist über einen kleinen Umweg einfach zu machen.
Die Steuerung des Accordion Widgets läuft hauptsächlich über extern liegende JScript und CSS Dateien. Das Aussehen der Balken wird u. a. über die CSS Datei "jquery-ui.css" gesteuert, die als Teil des JQuery User Interfaces angelegt wurde.
Öffne die Datei mal über diesen Link in deinem Browser und speichere sie anschließend als "jquery-ui.css" ab.

Die für die Änderung der Farbe des Balkens nötige Änderung kannst du in der Zeile 983 "background:" machen, indem du den aktuellen Hex Wert "#007fff" gegen einen beliebigen anderen Wert austauscht.

Speichere die geänderte Datei in das Verzeichnis "index_htm_files" deines exportierten- oder hochgeladenen Projekts. Besser ist aber die Speicherung im Hilfsverzeichnis deines Projekts. Der WD sorgt dann automatisch bei jedem Export/Upload dafür, dass die Datei in das Verzeichnis "index_htm_files" kopiert wird.

Im Scriptcode für den HTML Head des Platzhalters für das Accordion Widget musst du jetzt noch den Link zur CSS Datei "jquery-ui.css" ändern, andernfalls siehst du von deiner Änderung auf der Website nichts..

Lösch also den Link "<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">'" und setz den neuen Link " <link rel="stylesheet" href="index_htm_files/jquery-ui.css">" stattdessen ein

Noch Fragen? 🤓

Klasse! Danke Dir. Eine letzte Frage noch. Wie kann ich den Code anpassen oder besser gesagt an welcher Stelle kann ich den Code so anpassen, dass die erste Zeile in geschlossenem Zustand bleibt anstatt immer geöffnet? Ich habe verschiedene Befehle ausprobiert, welcher m.M.n. dafür zuständig sind aber ohne Erfolg.

@vikkiv

an welcher Stelle kann ich den Code so anpassen, dass die erste Zeile in geschlossenem Zustand bleibt

the same procedure as last time 😗
Zumindest die gleiche Vorgehensweise, allerdings jetzt mit der JScript Steuerdatei "jquery-ui.js".

Öffne die Datei über diesen Link wieder mit deinem Browser und speichere sie als "jquery-ui.js" in einem geeigneten Verzeichnis auf deinem PC ab.

Öffne die gespeicherte Datei mit einem einfachen Texteditor wie "notepad++" o. ä. und ändere in der Variable "widgetsAccordion" in der Zeile 4366 den Wert "active" für den Parameter "options" vom Originalwert 0 (Null) in den leeren Wert "", dann bleiben alle Rubriken im Accordion geschlossen.

Speichere die geänderte Datei in das Verzeichnis "index_htm_files" deines exportierten- oder hochgeladenen Projekts. Besser, wie schon gesagt, ist die Speicherung im Hilfsverzeichnis deines Projekts, damit der WD automatisch bei jedem Export/Upload dafür sorgen kann, dass die Datei in das Verzeichnis "index_htm_files" kopiert wird.

Wie schon geübt, musst du auch jetzt wieder die Referenz für das Script im HTML Head des Platzhalters der Desktop Version ändern.
Lösch die originale URL und ersetz sie durch die Pfadangabe zum Verzeichnis "index_htm_files"

<script src="index_htm_files/jquery-ui.js"></script>

Das war's