Akkordeon ohne Absatz nach dem Text formatieren

Question

Liebe Community,

kennt jemand eine Möglichkeit, ein Akkordeon so zu formatieren, dass unter dem Text kein Abstand mehr angezeigt wird? Sobald man die Formatierung auf Akkordeon stellt, wird standardmäßig eine Leerzeile eingefügt.

Ich hätte gerne, dass der Text bündig mit der Box schließt, sodass möglichst wenig Platz nach dem Aufklappen verbraucht wird.

Bisher habe Ich folgenden HTML-Code, den Ich dann auf Akkordeon umstelle:

<p style="margin:0;text-align:justify;font-size:2;"><font face="Calibri">
    <b>A</b>: abc
    
    <br />
    <br />
    
    <b>B</b>: abc
    
    <br />
    <br />

    <b>C</b>: abc

</font></p>

Vielen Dank für die Unterstützung.

LG

Answer 1

Eine Leerzeile wird nicht eingefügt, aber für den Inhalt des Akkordeons ist im Layout standardmäßig ein wenig Abstand hinterlegt:

div.s2accordion > .content {
  padding: 0.5em 0.5em 1.2em 0.5em;
}

Wenn Sie im Layout oder per pageCSS() folgenden CSS-Code einbinden, wird das entfernt:

div.s2accordion > .content {
  padding: 0 0 0 0;
}

Sie können die vier Angaben (oben, rechts, unten, links) natürlich individuell und nach Bedarf anpassen.

<font> für die Schriftart und <br> für Abstände sind übrigens kein guter Stil. Besser wäre:

<div style="margin-bottom: 2em"><b>A</b>: abc</div>
<div style="margin-bottom: 2em"><b>B</b>: abc</div>
<div><b>C</b>: abc</div>

Comments

Vielen Dank für den Vorschlag und die Verbesserungen.

Ich habe auf der Seite bereits folgenden CSS-Code. Wie kann Ich das dort einbinden? Das Element mit dem Akkordeon ist EQ26.

pageCSS('
  body {
    #EQ14_tab.s2items div.s2aboveLabels > div.s2polarLeft,
    #EQ14_tab.s2items div.s2aboveLabels > div.s2polarRight,
    #EQ15_tab.s2items div.s2aboveLabels > div.s2polarLeft,
    #EQ15_tab.s2items div.s2aboveLabels > div.s2polarRight{
    border: 0 none;
    }
  }
');

---

Entweder Sie verwenden einen zusätzlichen pageCSS()-Befehl oder Sie schreiben es vor das schließende ');

pageCSS('
    #EQ14_tab.s2items div.s2aboveLabels > div.s2polarLeft,
    #EQ14_tab.s2items div.s2aboveLabels > div.s2polarRight,
    #EQ15_tab.s2items div.s2aboveLabels > div.s2polarLeft,
    #EQ15_tab.s2items div.s2aboveLabels > div.s2polarRight {
      border: 0 none;
    }
    div.s2accordion > .content {
      padding: 0 0 0 0;
    }
');

Das body{} ist übrigens m.E. falsch.