[...] Element namens "body.xr_bgb18". Wo finde ich diese Datei? [...]

Mit der Klasse ".xr_bgb" wird die Hintergrundfarbe definiert. Du findest sie in der CSS Datei "xr_main.css", die nach einem Export/Upload im Verzeichnis "index_htm_files" liegt.

Wo werden diese temporären Dateien auf meinem Rechner abgelegt, wenn ich mir meine Arbeit im Browser ansehe? Bzw. wie komme ich an diese Datei im Web Designer heran, wenn ich sie direkt bearbeiten will? Mein Ziel ist, die zentrale CSS-Datei für die gesamte Webseite zu bearbeiten, um die Styles übergreifend festzulegen, statt mehrere CSS-Style-Anweisungen einzubinden, die sich gegenseitig überschreiben. Erscheint das sinnvoll? Ich will so eine übersichtlichere Grundstruktur schaffen.

[...] habe ich ein paar Schriftstylings (Größe, Font, Farbe) als Template oben in der Stilwahl-Leiste abgespeichert, [...] Wenn ich einfach diese Custom Styles als Referenz für meine Akkordeon-Box angeben kann, ist mir das auch recht. [...]

Eigene CSS Dateien, in denen Du neue Klassen angelegt hast, kannst Du problemlos in Deine Projekte einbinden, wenn Du dazu ein neues Link Tag anlegst.
Die o. a. CSS Datei "xr_main.css" wird z. B. so eingebunden:

Wenn ich wie auf dem Screenshot Stylings festlege, werden diese dann in einer neuen CSS-Datei abgelegt? Wo finde ich diese? Nebenbei, ich verwende eine eigene zusätzliche Schriftart, muss ich etwas berücksichtigen, damit diese fehlerfrei exportiert und auch am Schluss auf den externen Clients dargestellt wird?

[...] Wo werden diese temporären Dateien auf meinem Rechner abgelegt, wenn ich mir meine Arbeit im Browser ansehe? [...]

Die CSS Dateien, die der WD beim Export/Upload anlegt findest Du immer im Verzeichnis "index_htm_files". Das gilt gleichermaßen für die hochgeladene Site auf dem Webserver also auch für die (temporär) exportierten Dateien auf Deinem PC. Wenn Du die Site nicht explizit auf Deinem PC exportierst, dann legt der WD vor dem Upload die Site in einem Standardverzeichnis ab. Auf meinem Win 8.1 PC ist das:

c:\Users\Username\AppData\Local\Temp\Xara_XWDPV17_#####\

Da bleiben die Dateien, die zur Site gehören, so lange liegen, bis das Projekt im WD geschlossen wird.

[...] Wenn ich wie auf dem Screenshot Stylings festlege, werden diese dann in einer neuen CSS-Datei abgelegt? [...]

Nein, der WD legt alle Infos (Pfade, Auszeichnungen, Namen, Effekte, etc.) in den standardmäßig angelegten CSS Dateien im Verzeichnis "index_htm_files" ab. Das sind: "custom_styles.css", "xr_fonts.css", "xr_fontsie.css", "xr_fontsrep.css", "xr_main.css" und "xr_text.css".

Den Inhalt der Dateien zu verändern ist nicht empfehlenswert. Ergänzungen (eigene CSS Klassen) kannst Du natürlich einpflegen und nach eigenem Gusto anpassen.

[...] ich verwende eine eigene zusätzliche Schriftart, muss ich etwas berücksichtigen, damit diese fehlerfrei exportiert und auch am Schluss auf den externen Clients dargestellt wird? [...]

Nein. Alle zusätzlichen Schriften und Schriftschnitte zu denen Du die nötigen Rechte hast, werden vom WD so in die exportierten Dateien eingebunden, dass jeder Besucher Deiner Site sie anzeigen/sehen kann, wenn sein Browser das unterstützt.
Leider gibt es dafür keine Garantie. Es kann also sein, dass ein Browser anstelle der von Dir vorgesehen Schrift eine (ähnliche) Ersatzschrift anzeigt. Aber darauf hast Du keinen Einfluss.

Danke. Das bringt mich auf jeden Fall weiter. Ich arbeite jetzt mal ein Bisschen mein Akkordeon und die Styles um, sehe aber schon die nächsten Frage am Horizont auftauchen.

Wie mache ich, dass sich die Länge der Seite anpasst, also vergrößert und verkleinert, wenn das Akkordeon ausgeklappt und zugeklappt wird? Zumal die einzelnen Segmente unterschiedlich lang sein werden.

Das bedeutet für mich, dass einmal Elemente darunter verschoben werden müssen, aber auch der ganz untere Seitenrand, an dem ich eine Fußleiste mit Kontaktdaten, Impressumslink etc. fixiert habe.

[...] Wie mache ich, dass sich die Länge der Seite anpasst, also vergrößert und verkleinert [...]

Wenn Du das Problem gelöst hast, dann bist Du auf dem besten Weg, einen WYSIWYG Web Designer mit selbstprogrammierenden Fähigkeiten zu kombinieren. Dafür könntest Du eine Menge Geld verlangen. 🤑

Im wirklichen Leben wird das aber (Stand heute) nicht funktionieren... 😇

Ok, dann habe ich mir das zu simpel vorgestellt. Ich muss also eine Seite immer groß genug anlegen, damit das Akkordeon darauf ausgeklappt werden kann?

Wie machen es denn solche Seiten? Ich habe übrigens völlig blind "unsere faqs" gegoogelt und gleich ein Beispiel gefunden.

[...] Ich muss also eine Seite immer groß genug anlegen, damit das Akkordeon darauf ausgeklappt werden kann? [...]

Genau so.
Oder Du legst eine separate HTML Seite an, die außer dem Akkordeon nichts enthält. Diese Seite bindest Du dann mit einem iframe in einen Platzhalter ein, der eine fixe, definierte Größe hat. Dann erscheint der Inhalt des Akkordeons ggf. mit einem vertikalen Scrollbalken auf der Seite...

[...] Wie machen es denn solche Seiten? [...]

Die von Dir gefundene Seite wurde mit "contao" erstellt. Das ist ein sogenanntes "Web Content Management System".
Damit kannst Du Seitenlayouts erstellen, die dank des integrierten CSS-Frameworks dynamisch zur Laufzeit zu einem »virtuellen Template« zusammengesetzt werden.
Im Gegensatz zu einem WYSIWYG Programm, wie es der Web Designer repräsentiert, musst Du bei den bekannten CMS Programmen eher abstrakt designen. Das heißt, dass Du befehlsorientiert layouten musst.
Deinem Vorhaben, mit CSS basierten Strukturen zu arbeiten, kommt das aber sehr entgegen.
Vorausgesetzt wird ein Webserver, der eine aktuelle Version von PHP und MySQL bereitstellt.

Schau Dir mal an, was der Anbieter für den interessierten Neueinsteiger so bietet... (klick).

Interessant. Vielleicht ist das etwas für meine nächste Website. Danke! Apropos Scrollbalken. Der erscheint in dem Akkordeon von hier immer beim Ausfahren eines Absatzes und verschwindet dann. Kann man den Scrollbalken komplett ausblenden? Er stört optisch und hat auch keinen Nutzen.

[...] Kann man den Scrollbalken komplett ausblenden? [...]

Man kann 😊

Denk' aber daran, dass danach keine Möglichkeit mehr besteht nach unten zu scrollen, wenn der Text im Akkordeon länger werden sollte...

@VeniVidi schrieb am 13.04.2020 um 01:35 Uhr

Hallo, ich spiele auch gerade mit dem Akkordeon herum und habe zwei Fragen.

1. Im Beispiel von BeRo ist es beim laden der Seite zugeklappt. Bei mir ist es aufgeklappt. Warum?

2. Ich habe jetzt verstanden, dass die der gesamte Code der Website in ein einziges großes Dokument mit Querverweisen gelegt wird. Wenn ich, sagen wir 40 Seiten Songtexte in 10 verschiedenen Akkordeonen ablege, wird dadurch nicht die ganze Seite viel zu groß und dadurch sehr langsam in einem Browser zu laden? Zumal ich Desktop und Mobil habe - wird das dann auch immer sofort beides im Browser abgerufen oder nur die benötigte Version?

Du hast in den letzten Tagen schon in verschiedenen, uralten Threads Fragen gestellt (s. o.), die Du besser hier, in Deinem Thread gepostet hättest...

Zu 1
Wenn Du im Code der Demo nichts verändert hast, dann sind alle Sektionen des Akkordeons zugeklappt, wenn die Seite geladen wird.
Da das bei Dir nicht so zu sein scheint, musst Du mal den von Dir genutzten Code mit dem aus der Demo vergleichen. Vermutlich wirst Du dann die Ursache des Problems finden...

Zu 2
Sicher kann eine Seite auch eine längere Ladezeit benötigen, wenn Unmengen von Texten angezeigt werden müssen. In der Praxis reden wir hier aber über Millisekunden je kB Text.
Das "Problem" existiert also nicht wirklich, zumal die Website vom WD so angelegt wird, dass nur der per HTML definierte Inhalt mit dem für die jeweilig genutzte Variante passenden Inhalt ausgeliefert wird.

Hallo BeRo, danke. ich bleibe dann jetzt hier im Thread, ich war mir da unsicher, ob ich das thematisch splitten soll.

Zu 2: Ok, da ist etwas dran. Ich probiere das einfach und hoffe das Beste, damit mir nicht zu viele ungeduldige User nach ein paar Sekunden warten abspringen.😀 Sehe ich das richtig, dass die meiste Ladezeit dann ganz am Anfang steht, wenn das ganze Dokumnet einmal in den Client geladen wird, und danach nur noch ein Bisschen Zeit vom Browser verwendet wird, um den aktuell gebrauchten Content im Browser darzustellen?

Zu 1: Wenn ich das Akkordeon aus dem Beispiel unverändert in meine Seite einsetze, ist es auch schon direkt ausgeklappt (erstes Segment). Ich konnte auch im Code nicht die Stelle finden, die das verursacht.

[...] Sehe ich das richtig, dass die meiste Ladezeit dann ganz am Anfang steht, wenn das ganze Dokumnet einmal in den Client geladen wird [...]

Als "Faustregel" kannst Du das so sehen.
Wenn Du die Ladezeit verbessern willst, kannst Du bei einem WYSIWYG Editor aber nicht sehr viel verändern, da bleiben Dir (ohne Zusatzprogrammierung) nur 3 Stellschrauben:

1. Bilder
   Anzahl, Größe, Komprimierungsrate
2. HTML Code
   Umfang
3. Scriptcode
   zusammenfassen, komprimieren, positionieren, auslagern

Die einzelnen Punkte hier im Detail zu erörtern würde den Rahmen dieses Threads sprengen und es passt ja auch nicht zum Thema "Akkordeon" des Threads.
Du findest jede Menge, auch sehr detaillierte, Erklärungen im WWW, wenn Du eine der einschlägigen Suchmaschinen z. B. nach "Ladezeit verringern" suchen lässt. Hier ist schon mal eine Seite mit Infos (klick).

[...] Wenn ich das Akkordeon aus dem Beispiel unverändert in meine Seite einsetze, ist es auch schon direkt ausgeklappt. [...]

Wie gesagt, schau Dir die Demo an und vergleiche dann die von Dir verwendeten Codesegmente mit denen aus der Projektdatei der Demo.
Ohne den von Dir verwendeten Code zu kennen, könnte ich nur Ursachen vermuten und das würde Dir nicht helfen... 🤓

[...] Wenn ich das Akkordeon aus dem Beispiel unverändert in meine Seite einsetze, ist es auch schon direkt ausgeklappt. [...]

Wie gesagt, schau Dir die Demo an und vergleiche dann die von Dir verwendeten Codesegmente mit denen aus der Projektdatei der Demo.
Ohne den von Dir verwendeten Code zu kennen, könnte ich nur Ursachen vermuten und das würde Dir nicht helfen... 🤓

Das ist es ja, auch wenn ich den Code aus der Demo eins zu eins übernehme, habe ich das Problem. Ich konnte auch nach mehrmaligem Vergleich nicht herausfinden, was die Ursache ist. Die Unterschiede liegen in den verwendeten Schriftarten, Farben und Box-Rand-Formatierungen. Das wird es doch nicht sein, oder?

Ist das hier bezogen auf dieses Akkordeon eine Lösung? https://stackoverflow.com/questions/4633971/how-do-i-keep-jquery-ui-accordion-collapsed-by-default Wenn ja, wo setzt man diesen Codeschnipsel ein?

[...] Ist das hier bezogen auf dieses Akkordeon eine Lösung? [...]

Nicht unbedingt. Fremdcode mit anderem Fremdcode zu "reparieren" ist nicht wirklich eine gute Idee... 🙃

Besser ist da sicher eine Analyse des vorhandenen Codes und wenn man das macht, sieht man, dass der von Dir festgestellte Effekt auf einem Problem beim Einbau der CSS Codes basiert.
Das Attribut "checked" darf nur 1x innerhalb eines CSS Scripts verwendet werden, in der Demo habe ich es aber 2x verwendet, 1x in der mobilen Variante und 1x in der Desktop Variante.
Das Attribut sorgt dafür, dass der damit versorgte "Radio Button" sich so verhält, als sei er geklickt worden. Die zugehörige Sektion wird also aufgeklappt/angezeigt.

Entferne also das Attribut aus Deinen Codesegmenten und alle Sektionen bleiben geschlossen 🤓

Nur zur Info:
Dass die Demo in der Desktop Version auch mit gesetztem Attribut "checked" alle Sektionen geschlossen zeigt, liegt daran, dass das Attribut nur 1x gesetzt werden darf. In der Demo wird in der mobilen Variante die erste Sektion geöffnet angezeigt, weil das gesetzte Attribut richtig erkannt wird. Für die Desktop Variante gilt das nicht mehr, weil das hier ebenfalls gesetzte Attribut ungültig ist, da es zum 2. Mal gesetzt wurde.

Ich habe das vorhin korrigiert, indem ich beiden HTML Codebereichen (Desktop u. Mobil) einen voneinander abweichenden Namen gegeben habe. Jetzt erscheint in beiden Varianten die erste Sektion geöffnet, wenn die Seite geöffnet wird.

Danke, das ist hilfreich. Die Akkordeone haben jetzt also unterschiedlich benannte Klassen je nach Version (Desktop/Mobil).

1 .Spielt das auch eine Rolle, wenn ich mehrere Akkordeone in jeder Version habe? Dann kann man ja z.B. innerhalb der Desktop-Variante herumnavigieren und verschiedene Akkordeone ausklappen, wodurch jedesmal das Attribut checked gesetzt würde. Wirkt sich das untereinander aus? Müsste ich dann theoretisch noch einmal für jedes Akkordeon einzeln eine eigene Klasse vergeben? Wo wird aktuell eigentlich der Wert im code auf checked gesetzt, wenn man ein Segment anklickt? Ich sehe das nicht.

2. Ich kann jetzt das Akkordeon, wie gewollt, beim Laden zugeklappt anzeigen. Kann ich aber ein ausgeklapptes Segment wieder durch erneutes Anklicken wieder zuklappen?