hallowebsite Collapse Grid

DE | EN

Ein Gutenberg-Block für Akkordeons im responsiven Raster, aufgebaut auf nativen details/summary-Elementen ohne JavaScript. Jeder Eintrag kann beliebige Blöcke und ein eigenes Hintergrundbild enthalten – ideal für FAQs und Leistungsübersichten.

Download v1.4.1
Version
1.4.1
Aktualisiert
14. November 2026
Dateigröße
7,2 KB
Autor
hallowebsite

Überblick

hallowebsite Collapse Grid ist ein Gutenberg-Block für Akkordeons im Raster-Layout. Jeder Eintrag ist ein natives HTML-Element <details>/<summary>. Er öffnet und schließt ohne JavaScript, ist von Haus aus per Tastatur bedienbar und funktioniert auch, wenn Skripte ausfallen. In jeden Eintrag kannst du beliebige Blöcke setzen (Text, Bilder, Buttons, Listen) – ideal für FAQs, Leistungsübersichten, Team-Profile oder Produktdetails.

Funktionen

  • Zwei Blöcke: Collapse Grid (Container) und Collapse Item (ein Eintrag).
  • Responsive Spalten: Desktop / Tablet / Mobil (Standard 3 / 2 / 1).
  • Native <details>-Elemente ohne JavaScript im Frontend.
  • Beliebige innere Blöcke als Inhalt.
  • Optionales Hintergrundbild auf der Titelleiste jedes Eintrags.
  • Einstellbarer Titel-Tag: span, h2–h6 (gut für SEO bei FAQs).
  • Pro Eintrag standardmäßig geöffnet einstellbar.
  • Schlankes, vorhersehbares Markup, das sich leicht gestalten lässt.

Verwendung

  1. Den Block Collapse Grid einfügen.
  2. In der Seitenleiste die Spalten pro Gerät und den Titel-Tag festlegen.
  3. Collapse Item-Blöcke hinzufügen, einen Titel eintragen und beliebige Blöcke hineinsetzen.
  4. Optional: pro Eintrag ein Hintergrundbild oder Open by default setzen.

Markup

<div class="wp-block-hallo-collapse-grid hc-grid" style="--hc-cols-d:3;--hc-cols-t:2;--hc-cols-m:1">
  <details class="wp-block-hallo-collapse-item hc-item">
    <summary class="hc-summary"><h3 class="hc-title-text">Frage</h3></summary>
    <div class="hc-content">…innere Blöcke…</div>
  </details>
</div>

Gestaltungsbeispiel

.hc-item { border: 1px solid var(--global-palette7); }
.hc-summary { padding: 1rem; color: var(--global-palette3); cursor: pointer; }
.hc-item[open] .hc-summary { background: var(--global-palette8); }
.hc-content { padding: 0 1rem 1rem; }

Klassen

  • .hc-grid: das Raster. Die Spalten kommen aus --hc-cols-d/-t/-m.
  • .hc-item, .hc-summary, .hc-title-text, .hc-content
  • .hc-has-bg / .hc-summary-has-bg: werden gesetzt, wenn ein Hintergrundbild hinterlegt ist.
  • .wp-block-hallo-collapse-item-N: Positionsklasse, um einzelne Einträge gezielt anzusprechen.

Changelog

Changed:
- Rebranding: neuer Name „hallowebsite Collapse Grid“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/collapse-grid/
- Keine funktionalen Änderungen.