Collapsible content

Overview

Collapsible content displays an accordion (expand/collapse rows) with optional image + layout controls, and can optionally output FAQPage structured data (Schema.org) when enabled.

This section is typically used for:

• FAQs

• Product/service details

• Shipping/returns content

• Policy highlights

---

Key features

• Accordion rows built from blocks (each row has a title + content).

• Optional image on the left/right with multiple width/layout modes.

• Multiple “open behavior” options (open first / open all).

• Optional FAQ schema output (with special handling when section is placed in header/footer).

• Supports section box layout (boxed background) except for the “half bleed image” layout.

---

Layout modes (section width)

The section calculates:

is_half_bleed_image

Enabled when:

• section_width == 'half_bleed_image' and

• image is set

This mode:

• Uses a “bleed” grid layout (image can bleed to the edge).

• Enforces minimum padding (at least 15px top/bottom in some cases).

has_section_box

Enabled when:

• enable_section_box_layout == true

• and section_width != 'half_bleed_image'

So: half-bleed image cannot be boxed (by design in this code).

---

FAQ Schema behavior

has_faq_schema becomes true when:

• enable_faq_schema is enabled AND

  • the section is not in header/footer, OR

  • if it is in header/footer, only enable schema on the homepage (request.page_type == 'index')

When enabled, the wrapper outputs:

• itemscope itemtype="https://schema.org/FAQPage"

And inside each accordion item:

• The question title gets itemprop="name"

• The answer wrapper gets itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"

That means the markup is ready for FAQ rich results as long as your content follows Google’s guidelines (unique Q&A, not repeated across many pages, etc.).

---

Section heading behavior

If title is set:

Non–half-bleed layout

• Uses your standard section-heading snippet inside .collapsible-content__header.

Half-bleed layout

• Heading is rendered differently:

  • A custom heading wrapper is shown twice:

    • Once for mobile (medium-hide large-up-hide)

    • Once for desktop (small-hide)

  • Optional short description (content_short_description) appears beside/below heading depending on breakpoints.

  • A heading line is rendered beneath it on desktop.

This is done to control positioning when the image bleeds.

---

Image behavior

If image is set:

• Rendered in a use-animate media container.

• Supports image_ratio with:

  • adapt: uses inline padding-bottom based on aspect ratio.

  • other ratios are handled via CSS classes: collapsible-content__media--{{ image_ratio }}

Other controls:

• hide_image_on_mobile: hides the image on small screens.

Desktop ordering:

• If desktop_layout == 'image_second', the grid gets collapsible-content__grid--reverse.

Desktop spacing:

• If image exists, horizontal spacing is set using:

  • --grid-desktop-horizontal-spacing: {{ desktop_gap }}px

---

Accordion rows (blocks)

For each block:

• The row title is taken from:

  • block.settings.heading OR fallback to block.settings.page.title

• Content is considered present if either:

  • block.settings.row_content is not blank OR

  • block.settings.page.content is not blank

Rows are only rendered if:

• heading is not blank AND has_content is true

Open behavior

A row is opened when:

• open_all_collapsible_row is true, OR

• open_first_collapsible_row is true AND it’s the first row

Row UI

• Optional icon via:

  • {% render 'icon-accordion', icon: block.settings.icon %}

• Content wrapper gets modifier classes:

  • accordion__content--no-icon if icon is 'none'

  • accordion__content--empty if both block content + page content are blank (though you already prevent rendering if empty)

---

Styling and spacing

Padding:

• Uses scaled padding (× 0.75) on mobile, full values on ≥750px.

• If the section has a title, top padding has a minimum of 15px.

• If in half-bleed mode, bottom padding also has a minimum of 15px.

Row spacing:

• Controlled via:

  • --accordion-distance-setting: {{ row_spacing }}px;

---

Notes / gotchas you may want to double-check

• sizes capture is missing an opening parenthesis in your snippet:
  min-width: {{ settings.page_width }}px) should be (min-width: {{ settings.page_width }}px)
  If that’s exactly in your file, responsive image sizing will be slightly off.

• Your FAQ schema currently marks the question name on the <h2> inside the <summary>, and the Answer on a <div class="rte">. That’s fine, but ideally:

  • Question should map clearly to Question/name and Answer to acceptedAnswer. You’re doing the acceptedAnswer part; some implementations also add itemprop="mainEntity" / itemtype="Question" per row. Not required, but sometimes used.