Support » Themes » Aufklappbare Tabelle

  • Ich probiere jetzt seit Tagen herum, finde aber keine ansprechende Lösung. Deshalb jetzt die Frage im Forum:
    Wie schaffe ich es in einer Tabelle, durch klicken auf einen Link ein aufklappbares Textfeld z.B für eine Erweiterung der Tabelle zu schaffen? Oder besser gesagt, damit es so funktioniert, wie unter dem Link: https://www.liga64.de/liga/view/153
    Theme: catch responsive

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Den Aufklapp-Effekt nennt man Akkordeon, wobei es da verschiedene Varianten gibt, bei denen z.B. andere aufgeklappte Bereiche automatisch wieder schließen, wenn ein neuer Bereich geöffnet wird. Der visuelle Effekt erinnert dann ein wenig an eine Ziehharmonika, deshalb der Name.

    Leider ist der Akkordeon-Effekt kein Standard-Element des WordPress-Editors. Du kannst dir aber mit dem Plugin Shortcodes Ultimate behelfen, dass für diesen Effekt (und einige andere) einen Shortcode zur Verfügung stellt. Mit dem Button Insert Shortcode > Accordion kannst du dann einen Shortcode einfügen, der z.B. so aussehen könnte:

    [su_accordion]
      [su_spoiler title="Titel des Abschnitts 1" style="fancy"] Eingeblendeter Inhalt [/su_spoiler]
      [su_spoiler title="Titel des Abschnitts 2" style="fancy"] Weiterer Inhalt [/su_spoiler]
      [su_spoiler title="Titel des Abschnitts 2" style="fancy"] Noch mehr Inhalt [/su_spoiler]
    [/su_accordion]

    Bei Ansicht der Seite im Frontend wird der Shortcode dann in passendes HTML umgewandelt und eine JavaScript-Funktion zur Animation eingefügt. Statt „Eingeblendeter Inhalt“ kannst du natürlich auch (im Text-Modus des Editors!) eine HTML-Tabelle einfügen:

    [su_accordion]
      [su_spoiler title="<table><tr><td>Mannschaft A</td> <td>Mannschaft B</td><td>Ergebnis</td></tr></table>" style="fancy"]
    <table>
     <tr>
      <td>SV Wasserhof</td> <td>SV Steindorf</td> <td>2:4</td>
     </tr>
     <tr>
      <td>SV Holzheim</td>  <td>SV Eisenstadt</td> <td>3:1</td>
     </tr>
    </table> 
      [/su_spoiler]
    [/su_accordion]

    Soweit sieht das schon ganz gut aus. Die Titelzeile ist schon ziemlich hoch, kann ich da noch Einfluss darauf nehmen über CSS, auch über die Hintergrundfarbe?
    http://www.sv-udenhausen.de/index.php/2017/06/12/kk-auflage-09-06-2017/

    kann ich da noch Einfluss darauf nehmen über CSS, auch über die Hintergrundfarbe?

    Ja. Im Customizer unter Zusätzliches CSS eintragen.

    .su-spoiler-style-fancy > .su-spoiler-title  { background: #1da300 }
    .su-spoiler-titel { min-height: 0; line-height: inherit; }
    .su-spoiler-title table { margin: 0; }
    .su-spoiler-title p { height: 0; }
    
Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das Thema „Aufklappbare Tabelle“ ist für neue Antworten geschlossen.