hallowebsite Collapse Grid

Overview

hallowebsite Collapse Grid is a Gutenberg block for accordions laid out as a grid. Each item is a native HTML <details>/<summary> element, so it opens and closes without JavaScript, is keyboard-accessible by default and keeps working if scripts fail. Inside each item you can place any blocks (text, images, buttons, lists). That makes it ideal for FAQs, service overviews, team bios or product details.

Features

• Two blocks: Collapse Grid (container) and Collapse Item (one entry).
• Responsive columns: desktop / tablet / mobile (default 3 / 2 / 1).
• Native <details> elements with no JavaScript on the frontend.
• Any inner blocks as content.
• Optional background image on the summary bar of each item.
• Configurable title tag: span, h2–h6 (good for SEO in FAQs).
• Open by default, per item.
• Lean, predictable markup that is easy to style.

Usage

1. Add the block Collapse Grid.
2. Set the columns per device and the title tag in the sidebar.
3. Add Collapse Item blocks, enter a title and place any blocks inside.
4. Optional: set a background image or Open by default per item.

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">Question</h3></summary>
    <div class="hc-content">…inner blocks…</div>
  </details>
</div>

Styling example

.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; }

Classes

• .hc-grid: the grid. Columns come from --hc-cols-d/-t/-m.
• .hc-item, .hc-summary, .hc-title-text, .hc-content
• .hc-has-bg / .hc-summary-has-bg: added when a background image is set.
• .wp-block-hallo-collapse-item-N: position class for targeting individual items.

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