Collapsible Grid Component

Display teasers for other pages in an interactive tabular format.

On this page:

Last reviewed: September 12, 2023

Accessibility
  • List Teaser images require Alt text.
  • Link text should be meaningful.
  • Use 'Open in New Window' sparingly.

> Read more about making this component accessible.

This component was designed for full-width pages (no sidebars). Performance on narrower pages may be unpredictable.

Using This Component

The component has two tabs: Collapsible Grid and Collapsible Grid Items.

By default, teaser images from the linked pages are displayed as slides in a grid pattern and when you mouse over a slide, the image 'flips' to display the associated teaser title. When you click a slide, the slide number is now displayed as a placeholder while the full teaser is revealed (title, image and description, plus any list of links that is associated with that page template). The full teaser is displayed below that slide row except for the bottom row whose teasers are displayed above that row.

Technical Restrictions

  1. This component was designed for full-width pages (no sidebars). Performance on narrower pages may be unpredictable.
  2. Unlike other carousels and slide decks, this component cannot be randomized.

Configure - Main Settings

Click the wrench icon to 'configure' these settings.

Collapsible Grid Tab

Number of grid columns: Choose from 3, 4 (default) or 5. The actual number of columns displayed will depend on the space available on the page. ('Grid columns' are not the same as regular page columns.)

Flip grid items: Provide a comma-separated list of slide numbers to declare which, if any, of the slides should be flipped so that the teaser title is displayed first instead of the image. (On mouse-over, the view flips from description to image, or vice versa.)

Note: The number of slides within the collapsible grid must match or exceed the 'Number of grid columns' value, or the teasers will not open up when a slide is clicked.

Accessibility Concerns

See an Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)
(Required)